Interaction

Detail auto-starts. Catalog hover, focus or Preview runs the reveal; leave and blur, offscreen and background stop it. Click, Enter or Space replays. Arrow keys seek 0.1 base seconds; Home starts; End/Escape settles.

States

A brief lead-in grows into a round droplet, then a rounded glass tile with a thick curved shoulder. The centre stays readable while its edges stretch, refract and disperse. Glass, bevel echoes, caustics and rings disappear completely. The resting logo uses 1 final scale; black backgrounds do not enlarge it automatically.

Effect notes

Tile size (logoSize): 256px; Logo scale (logoScale): 0.72; Final logo scale (finalLogoScale): 1; Logo relief (logoRelief): 1.

Effect notes

Optical depth (depth): 2.9; Dispersion (dispersion): 1; Double bevel (relief): 1; Caustics (caustics): 1; Highlights (highlights): 1; Echo plate tint (echoTint): 0.5; Inner wall focus (innerWallFocus): 0; Light diffusion (bloom): 0.55.

Effect notes

Drop strength (dropStrength): 1; Ring decay (decay): 1.4s; Animation speed (speed): 1×; Loop delay (loopDelay): 1.6s.

Effect notes

Background X (backgroundX): 0%; Background Y (backgroundY): 0%; Background scale (backgroundScale): 1×; Background tint opacity (backgroundTintOpacity): 0.

Effect notes

Preview pixel ratio cap (maxDpr): 2.

Effect notes

Logo #09111b; plate #f1f1f1; background #f1f1f1. Use the chosen recolour and logo relief. Plate enabled. Uploaded logo: none; background: none.

Effect notes

Depth controls smoothly settling magnification and bending; dispersion splits edge colours; double bevel adds an inset face. Caustics focus shoulder light, highlights control reflected contours, diffusion softens bright edges. Echo tint blends cool glints with the plate colour. Inner-wall focus changes a full contour into two corner arcs. Background images cover the frame with offset, zoom and tint; their plate becomes see-through.

Timing

Base reveal duration 1800 ms; delay 0 ms; speed 1×; reveal about 1.800s. The base timeline starts forming around 0.12s, morphs from droplet to tile during 0.27–0.49s, clears its glass around 1.4s and completes the sequence at 1.8s; frame selection spans 0–2.4s with a 0.6s ending hold. Speed and observation speed change advancement, not base seek units. Stop after one reveal.

Enter and exit

Currently ready to play. Appearance, artwork and material edits update actual pixels. Unpaused video-mode edits replay; image mode seeks 0.9s. Finite catalog demos use the shared replay controller and reading dwell without changing saved loop.

Repeated input and interruption

Pause freezes the sequence; resume retains progress; replay returns to the droplet. Frame inspection, keyboard seeks and toolbar observation do not alter material. Preview, descriptions, Motion, JSON, offline HTML and replay projects share settings. Uploads become embedded local pixels with original files preserved. SVG is rasterized without external links.

Effect notes

Type video; format MP4; ratio 16:9; resolution 1080p gives 1920 × 1080px; target 60 fps. Images use base frame 0.9s. Video records one sequence and ending hold, about 2.400s. Preview and export share a 700px reference scene; resolution changes output pixels. JPEG/video flatten transparency on black. Export uses the click-time configuration snapshot.

Reduced motion

Show the final logo immediately and skip automatic reveal and loops. Native seeking and asset loading remain available. Manual seeking shows a still selected frame; replay settles without automatic repetition.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "liquid-glass-logo",
  "durationMs": 1800,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "liquidGlassLogo": {
    "logoKind": "tuneshape",
    "text": "tuneshape",
    "logoSrc": "",
    "logoName": "",
    "backgroundSrc": "",
    "backgroundName": "",
    "originalColors": false,
    "tile": true,
    "logoColor": "#09111b",
    "tileColor": "#f1f1f1",
    "backgroundColor": "#f1f1f1",
    "transparentBackground": false,
    "backgroundTint": "#000000",
    "loop": false,
    "paused": false,
    "exportType": "video",
    "exportFormat": "mp4",
    "exportRatio": "16:9",
    "exportResolution": 1080,
    "exportFps": 60,
    "logoSize": 256,
    "logoScale": 0.72,
    "finalLogoScale": 1,
    "logoRelief": 1,
    "depth": 2.9,
    "dispersion": 1,
    "relief": 1,
    "caustics": 1,
    "highlights": 1,
    "echoTint": 0.5,
    "innerWallFocus": 0,
    "bloom": 0.55,
    "dropStrength": 1,
    "decay": 1.4,
    "speed": 1,
    "loopDelay": 1.6,
    "backgroundX": 0,
    "backgroundY": 0,
    "backgroundScale": 1,
    "backgroundTintOpacity": 0,
    "maxDpr": 2,
    "exportFrame": 0.9
  }
}

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.