Interaction

Hover the catalog preview; detail auto-starts. Click or press Enter / Space to create expanding ripples with illuminated crests.

States

Canvas 320 × 230; offset 0, 0 px; scale 1. Waves advance continuously without a reverse phase.

Timing

Base clock 12000 ms; delay 0 ms; wave speed 1×. Accumulate time across repeats without resetting the sea; speed 0 holds the current frame.

Enter and exit

Hover the catalog preview to play; leaving restores the still poster. Detail starts automatically. Flow continuously. The pointer creates a local swell and slight parallax. Click to stack up to 12 ripples; focus and press Enter / Space for a central ripple.

Repeated input and interruption

The toolbar pauses waves and ripple age, then resumes the same frame. Appearance and wave-speed edits preserve accumulated time. Observation speed, pointer position and active ripples are excluded from JSON.

Reduced motion

Follow reduced motion: show a still sea with no pointer swell, click ripples or repetition.

Particle tide settings

Background #242426; water #B9B9C2; crest #FFFFFF; density 1; particle size 1; wave height 1; wavelength 1; speed 1; interactive true; click ripples true.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "particle-tide",
  "durationMs": 12000,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "ocean",
      "property": "tideTime",
      "values": [
        0,
        12
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ],
  "tide": {
    "backgroundColor": "#242426",
    "waterColor": "#B9B9C2",
    "crestColor": "#FFFFFF",
    "density": 1,
    "particleSize": 1,
    "waveHeight": 1,
    "wavelength": 1,
    "speed": 1,
    "interactive": true,
    "clickRipples": true
  }
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Original implementation. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.