Interaction

Hover or keyboard focus gently fans the papers. Click or Enter / Space toggles full opening. Mouse leave, blur, outside click or Escape closes the folder; touch taps toggle it and outside taps close it.

States

Name “” (blank hides it); 3 documents: Notes / Draft / Ideas. Color white; size md (1×); initially open false. Lift 175px; half-spread 68px.

Timing

Spring response basis 800 ms, with a small overshoot and a 6% response-time stagger between papers. Closing has no added delay. Observation speed changes the runtime clock without altering saved timing.

Enter and exit

The resting flap tilts 15°; hover lift 20px. Full opening tilts the flap 55° and fans the papers by 16° on either side. Folder name, document titles and summaries use real text; empty summaries leave paper rules visible.

Repeated input and interruption

Repeated clicks retarget current positions and velocities. Pause, background and inactive previews freeze springs, stagger delays and demo age and resume in place. Play demonstrates one peek, open and return. Size, color and content update immediately; geometry edits trigger a demonstration. Runtime hover, focus, open state and observation speed are excluded from JSON.

Reduced motion

Settle instantly into the current interaction state without stagger or timed demonstrations. Click, focus and touch remain available.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "glass-folder",
  "durationMs": 800,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "glassFolder": {
    "name": "",
    "documents": [
      {
        "title": "Notes",
        "body": ""
      },
      {
        "title": "Draft",
        "body": ""
      },
      {
        "title": "Ideas",
        "body": ""
      }
    ],
    "color": "white",
    "size": "md",
    "lift": 175,
    "spread": 68,
    "hoverLift": 20,
    "tilt": 55,
    "fanAngle": 16,
    "initialOpen": 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: Original implementation. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.