Interaction

Detail auto-starts. Catalog hover, focus or Preview runs the effect; leave and blur, offscreen and background stop it. Native buttons support click, Enter and Space. Message input is a local demo with no network submission.

States

Seed 7 and phase 0 define the start. Speed 0.7; continuous flow. Zero speed preserves the current composition. Appearance edits preserve time; phase/seed changes reset composition.

Effect notes

Mode spectrum; starting colour #b126ff; second #ff177c (inactive); third #35d3ff (inactive). Fixed mode retains hue; two/three colours change the whole tint over time. Full spectrum varies spatially. Reflections continue moving.

Effect notes

Corner radius (borderRadius) 50%; Feather (feather) 100; Applied projection angle (projectionScale) 174.7°; Brightness (intensity) 1.4; Stationary grain (grain) 0.105. Radius uses the shorter side. Applied projection is stored directly as 174.7°; face 174°. Radius edits update that angle; imported values are used directly without hidden conversion.

Timing

Entrance blur-up, base duration 700 ms, speed 1×. Blur + rise takes 700ms with 10px blur and 20px rise. Zoom takes 600ms from 65% to 100%. Delay 0ms. Inactive entrance parameters are retained but not rendered.

Enter and exit

Hover mode brighten. Brighten increases light and lifts 2px. Flow shifts reflected composition. Follow pointer moves and stretches the button with a spring and a pointer light. Retain feedback while focused; leave and blur restore it. Disabled buttons do not react.

Repeated input and interruption

Toolbar pause freezes material, entrance and spring clocks; resume continues without jumping. Replay restores the seeded phase. Entrance edits replay automatically. Finite catalog entrances reuse the shared replay controller; continuous flow is not interrupted by a timer.

Reduced motion

Skip entrance and automatic flow, show a still material. Native input/buttons and keyboard remain usable. Brightness feedback settles immediately; elastic translation and stretch are disabled.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "chromatic-button",
  "durationMs": 700,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "chromaticButton": {
    "example": "message",
    "hoverEffect": "brighten",
    "entrance": "blur-up",
    "colorMode": "spectrum",
    "color": "#b126ff",
    "color2": "#ff177c",
    "color3": "#35d3ff",
    "label": "Get started",
    "disabled": false,
    "paused": false,
    "entranceSpeed": 1,
    "entranceBlur": 10,
    "entranceDistance": 20,
    "entranceScale": 0.65,
    "borderRadius": 50,
    "feather": 100,
    "projectionScale": 174.7,
    "intensity": 1.4,
    "grain": 0.105,
    "speed": 0.7,
    "phase": 0,
    "seed": 7
  }
}

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.