Soap Bubble UI

Interaction

Hover, focus or Preview runs the gallery film. Leave, offscreen and background stop it. Buttons press, search accepts input, switches toggle, sliders support dragging and arrow keys, and the menu supports arrows, Enter and Escape.

States

The film waits at its current phase, flows when active, swells while pressed and returns on release.

Enter and exit

The menu expands from the round trigger and closes into it; rapid changes preserve the current progress.

Effect notes

Scale 1×; radius 40px; backdrop plain; interactive. View showcase; neutral #f1f1f1 page; button “Continue”; search “Search”; menu “Select chats / Read all”; Volume defaults to 40; switch defaults on.

Effect notes

Jiggle (wobble): 0.4; Speed (speed): 1; Seed (seed): 7; Pop effect (pop): droplets; Paused (paused): false.

Effect notes

See-through (seeThrough): 0.3; Bend (seeThroughBend): 0.3; Refraction (refraction): 0.15; Opacity (opacity): 0; Oil opacity (oilOpacity): 1.

Effect notes

Liquid glass (glass): 0.95; Oil film (iridescence): 0.5; Oil size (filmScale): 4.85; Oil coverage (oilCoverage): 0.73; Oil edge (px) (oilEdge): 18; Oil edge fade (oilEdgeFade): 2.33; Clear centre (clearCenter): 0.57; Film thickness (nm) (thickness): 480; Drainage (drainage): 0.35; Swirl (swirl): 0.5; Reflectivity (reflectivity): 1.3; Dispersion (dispersion): 1; Glass bevel (px) (bevel): 14.

Effect notes

Soap palette (soapPalette): natural; Tint (tint): auto; Soap color (soapColor): auto; Soap shades (soapShadeColor): auto; Soap highlights (soapHighlightColor): auto; Shade colour (bottomShadeColor): #ffffff; Red and pink (soapPaletteRed): #ff6685; Gold (soapPaletteGold): #f6d365; Green (soapPaletteGreen): #83e8a9; Cyan (soapPaletteCyan): #60dce9; Blue (soapPaletteBlue): #7799ff; Violet (soapPaletteViolet): #c084fc.

Effect notes

Mirage (mirage): 0.7; Mirage reach (reach): 2; Pointer parallax (tilt): 1; Top highlight length (topLength): 1; Top highlight fade (topFade): 0.4; Top highlight tail (topTail): 1; Lighting (environment): auto; Inner reflection shape (windowTwinShape): mirror; Inner reflection (windowTwin): false; Key reflection (keyLight): true; Bottom shade (bottomShade): false.

Effect notes

Window size (windowSize): 0.75; Window width (windowWidth): 0.8; Window head (windowHead): 0.7; Window tail (windowTail): 0.6; Window intensity (windowIntensity): 0.85; Window gradient (windowGradient): 0.96; Window length (windowLength): 1.3; Window margin (windowMargin): 0.85; Window bend (windowBend): 0.75; Glint size (glintSize): 1.65; Glint intensity (glintIntensity): 0; Glint distance (glintDistance): -0.45; Glint height (glintHeight): 0.65; Window style (windowStyle): edge; Glint shape (glintShape): auto; Window light (windowLight): false.

Effect notes

Pixel ratio (maxDpr): 2.

Effect notes

Oil opacity is independent of tint opacity. Clear centre clears the middle; oil edge affects large controls. Dispersion needs glass, window and glint controls need window light, and six palette colours need custom mode. Open the menu to inspect see-through and bend.

Timing

Menu response basis 500 ms; jiggle 0.4; film speed 1. Film flows continuously. Toolbar pause freezes clocks and resumes at the current phase.

Repeated input and interruption

Rapid changes retarget current state without a queue. Inspector defaults are saved; live inputs, selections, menus, sliders, focus and observation speed are transient. Preview, descriptions, Motion data, offline HTML and source exports share the settings.

Reduced motion

Film stays still without automatic wobble or pop animation. Menus settle immediately; native search, switches, sliders and keyboard actions remain available.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "soap-bubble",
  "durationMs": 500,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "soapBubble": {
    "wobble": 0.4,
    "speed": 1,
    "seed": 7,
    "seeThrough": 0.3,
    "seeThroughBend": 0.3,
    "refraction": 0.15,
    "opacity": 0,
    "oilOpacity": 1,
    "uiScale": 1,
    "radius": 40,
    "glass": 0.95,
    "iridescence": 0.5,
    "filmScale": 4.85,
    "oilCoverage": 0.73,
    "oilEdge": 18,
    "oilEdgeFade": 2.33,
    "clearCenter": 0.57,
    "thickness": 480,
    "drainage": 0.35,
    "swirl": 0.5,
    "reflectivity": 1.3,
    "dispersion": 1,
    "bevel": 14,
    "mirage": 0.7,
    "reach": 2,
    "tilt": 1,
    "windowSize": 0.75,
    "windowWidth": 0.8,
    "windowHead": 0.7,
    "windowTail": 0.6,
    "windowIntensity": 0.85,
    "windowGradient": 0.96,
    "windowLength": 1.3,
    "windowMargin": 0.85,
    "windowBend": 0.75,
    "glintSize": 1.65,
    "glintIntensity": 0,
    "glintDistance": -0.45,
    "glintHeight": 0.65,
    "topLength": 1,
    "topFade": 0.4,
    "topTail": 1,
    "maxDpr": 2,
    "element": "showcase",
    "page": "neutral",
    "backdrop": "plain",
    "pop": "droplets",
    "soapPalette": "natural",
    "environment": "auto",
    "windowStyle": "edge",
    "glintShape": "auto",
    "windowTwinShape": "mirror",
    "paused": false,
    "windowLight": false,
    "windowTwin": false,
    "keyLight": true,
    "bottomShade": false,
    "defaultChecked": true,
    "disabled": false,
    "tint": "auto",
    "soapColor": "auto",
    "soapShadeColor": "auto",
    "soapHighlightColor": "auto",
    "bottomShadeColor": "#ffffff",
    "soapPaletteRed": "#ff6685",
    "soapPaletteGold": "#f6d365",
    "soapPaletteGreen": "#83e8a9",
    "soapPaletteCyan": "#60dce9",
    "soapPaletteBlue": "#7799ff",
    "soapPaletteViolet": "#c084fc",
    "toggleColor": "#28c64f",
    "sliderFrom": "#0986ff",
    "sliderTo": "#9d7bff",
    "buttonText": "Continue",
    "searchPlaceholder": "Search",
    "menuFirst": "Select chats",
    "menuSecond": "Read all",
    "sliderLabel": "Volume",
    "sliderValue": 40
  }
}

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.

• View this effect’s source on GitHub ↗
• English source guide
• Machine-readable catalog

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.

• Export and implementation workflow
• Keyboard and reduced-motion checks
• All motion examples