Details

A reveal and a height transition for <details>. Each press flips open immediately, like the native element; the animation follows.

Live example: ink, then dissolve

Ink

The cover recedes from the top with an organic edge, like ink soaking into paper.

Dissolve

Fractal noise, top to bottom, with a glowing edge. This is the default effect.

Live example: an exclusive accordion (name="faq")

Shipping

Orders leave the warehouse within two days.

Opening another row closes this one.

Returns

Thirty days, no questions asked.

Usage

<details>
  <summary>Title</summary>
  <div class="content">Content</div>
</details>

import { createRenderer, createDetailsFx, inkEffect } from 'webgl-ui'

const renderer = createRenderer()
const fx = createDetailsFx(document.querySelector('details')!, { renderer, effect: inkEffect })

// later, e.g. when a component unmounts
fx.destroy()

The details needs a <summary> and one content element after it. The canvas is placed inside the content element, so give it a background: the cover is painted in that color.

Options

Option	Type	Default	Description
`renderer`	`Renderer \| () => Renderer`	required	The shared renderer.
`effect`	`EffectDef`	`dissolveEffect`	Any effect: built-in, `defineGlslEffect` or `defineTslEffect`.
`duration`	`number`	`800`	Opening in ms; closing takes 70%. A reversal halfway takes the remaining share.
`content`	`HTMLElement`	first child after the summary	The element that is revealed.
`trace`	`(message) => void`	none	Debug hook for internal decisions.

Returns

Member	Description
`destroy()`	Settles a running animation, removes the listeners. The details stays where it was.
`debug()`	`{ open, target, running, progress }`, for tests and devtools.

CSS hooks

Hook	Where	Meaning
`[data-animating]`	details	Present while an animation runs.
`--p`	details	Progress, 0 (closed) to 1 (open), the same value the shader receives.
`--fx-cover`	content (inherited)	Cover color as `r, g, b` (0..255). Default: the content background.

Two recipes use these: fade and blur the content and soften the clip edge.

Behavior and accessibility

Enter and Space on the summary, the toggle event and find-in-page are native.
Exclusive accordions (name): the browser closes the open sibling at once, as always; the library only animates its height, so the page does not jump.
While closing, open stays true until the end, so the content stays visible; assistive technology announces it expanded for that time.
Reduced motion, no WebGL2, a lost context: the click is not intercepted at all.

Full table: native parity, details. Stress test: playground.