Bars of Sand 3D terrain model of El Porto beach with a crescent sandbar, labeled with the bar crest depth and the first break

Bars of Sand

Description

An interactive browser surf lab that shows how sandbars shape breaking waves, and how waves reshape the sand.

My Roles
  • Product strategy
  • product engineering
  • UX design
Project Link

See what’s under the surf

Sandbars decide where waves break, but they stay hidden underwater. I built a rotatable 3D terrain model with elevation colors and contour lines that reveals the bar beneath the waves. Labels mark the bar crest and the first break, so the link between the seabed and the surf is easy to see.

Watch it from the lineup

Presets for bar shape, swell direction, wave size, and tide are one click away, and the waves respond right away. The Surf view shows the result from the water, the way a surfer sees it. Wave height is exaggerated and labeled, while depth and distances stay true to scale.

Fine-tune the bar

Presets get people started, and the Fine-Tune panel lets them go deeper. Bar height, position, width, and curvature each pair a slider with a numeric field and a short explanation. The Cross-section view slices through the water, so users can click any point and measure the bed below.

Keep the experiment

A good run is worth coming back to. Users can name and save an experiment with its settings, terrain, and evolved seabed right in the browser. JSON export and import make runs easy to back up or share, no account needed.

Explain the physics plainly

A simulation only helps if people understand it. The How It Works guide pairs simple diagrams with plain-language notes on how wind, tide, and swell change the waves. It also spells out the model’s assumptions and limits, so nobody mistakes the lab for a surf forecast.