Interaction

Play once on detail entry. Click or press Enter / Space to replay. Move the pointer to melt nearby strokes and change the touched letter’s hue. Arrow keys explore letters; Escape clears the lens. Touch and drag are supported.

States

The same glyphs resolve from a strongly blurred, alpha-thresholded liquid mass. Letters rise slightly with a 50ms basis stagger. No surrogate ribbon, squash, rotation or bounce. The caption follows; leader lines stay hidden during loading.

Enter and exit

Keep the readable wordmark after the entrance. Pointer leave fades the local lens and deformation without replaying the entrance; click or Play explicitly restarts it.

Timing

Full entrance 1600 ms; delay 0 ms. Catalog hover, keyboard focus and mobile Preview repeat after a readable dwell.

Repeated input and interruption

Pause freezes the entrance and pointer recovery; resume continues the clock. Inactive, offscreen and background catalog cards stop. Pointer position, colour mutations and progress stay out of saved configuration.

Content and parameters

Text "tuneshape"; type size 210px; melt intensity 1; interaction radius 100px; grid true; annotations true. Proportionally fit a 1280 × 720 reference canvas.

Effect notes

Glyph colour #9864c7; background #f1f1f1; weight 600; caption “Shape the way things move.”. Grid, labels and caption adapt to the actual background; the default shares the website preview's #f1f1f1.

Reduced motion

Show the readable final wordmark and annotations; disable the entrance, pointer melting and catalog repetition.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "gooey-wordmark",
  "durationMs": 1600,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "typography": {
    "kind": "gooey-wordmark",
    "text": "tuneshape",
    "fontSize": 210,
    "fontWeight": 600,
    "color": "#9864c7",
    "intensity": 1,
    "radius": 100,
    "grid": true,
    "annotations": true,
    "backgroundColor": "#f1f1f1",
    "caption": "Shape the way things move."
  }
}

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.