Interaction
Detail auto-starts. Hover, focus or Preview runs catalog cards; leave, blur, offscreen and background stop them. Pointer and touch movement reshape terrain. Arrow keys position the effect, Home centres, Escape clears, Enter/Space replays.
States
Terrain uses the container CSS pixels: scale 480px, density 5, seed 42. Appearance edits preserve accumulated time; replay restores the same seed at time zero.
Effect notes
Terrain scale (scale): 480px; Contour density (density): 5; Terrain distortion (distortion): 2.4; Terrain seed (seed): 42.
Effect notes
Line width (lineWidth): 1px; Line opacity (opacity): 1; Dash length (dashLength): 7px; Dash gap (dashGap): 8px.
Effect notes
Gradient diffusion (gradientDiffusion): 0; Grain (grain): 0.
Effect notes
Flow speed (speed): 1.5.
Effect notes
Pointer strength (hoverStrength): 0.6; Pointer radius (hoverRadius): 200px; Pointer follow (hoverFollow): 0.16s; Pointer fade (hoverFade): 0.8s.
Effect notes
Style solid; regular ink #000000; every fourth level #000000. Elevation gradient disabled; background #f1f1f1. Saved gradient stops are inactive.
Timing
Entrance fades over 800 ms after 0 ms. Speed 1.5; flow is continuous. Toolbar pause freezes the current frame; resume continues its phase.
Enter and exit
Pointer effect enabled; mode rings; direction push. Entry and movement follow over 0.16s, leave recovers over 0.8s. Disabling the effect clears deformation.
Effect notes
Scale changes landform size and density changes elevation spacing independently. Mixed mode dashes every fourth level. Dash/gap lengths follow connected curves. Elevation gradients replace the solid background; diffusion softens colour only. Grain is fixed to the screen and also textures ink. Inactive gradient and pointer settings are retained and dependent controls are hidden.
Repeated input and interruption
Settings, descriptions, Motion data, JSON, offline HTML and replay projects share the same terrain configuration. Pointer/keyboard positions, follow progress, phase, observation speed and toolbar transport are transient and never serialized.
Reduced motion
Show a still terrain, skip entrance and automatic flow, and settle pointer/keyboard changes immediately without animated recovery.
Default configuration
These values come from the maintained default configuration. Editor drafts and exported changes can differ.
{
"schemaVersion": 2,
"recipeId": "topographic-flow",
"durationMs": 800,
"delayMs": 0,
"easing": [
0,
0,
1,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": false,
"interruption": "retarget",
"tracks": [],
"topographicFlow": {
"scale": 480,
"density": 5,
"distortion": 2.4,
"seed": 42,
"lineWidth": 1,
"opacity": 1,
"dashLength": 7,
"dashGap": 8,
"gradientDiffusion": 0,
"grain": 0,
"speed": 1.5,
"hoverStrength": 0.6,
"hoverRadius": 200,
"hoverFollow": 0.16,
"hoverFade": 0.8,
"lineStyle": "solid",
"backgroundColor": "#f1f1f1",
"lineColor": "#000000",
"accentColor": "#000000",
"gradientEnabled": false,
"gradientColors": [
"#2359eb",
"#12c4eb",
"#14c87f",
"#ffe22e",
"#ff932f",
"#f53f42"
],
"hoverEffect": "rings",
"hoverDirection": "push",
"hoverEnabled": true,
"animateEntrance": true,
"paused": false
}
}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: 独立实现 · ReactDrops 视觉参考. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.