Bead Curtain

Written for the variant you picked above: Amber

Build a section that opens under a bead curtain the pointer can push through. Props: eyebrow, title, lead, action {label, href}, palette {ground, beads [colours], cord, ink, muted, accent, onAccent, glass}, onNavigate and className. Physics (pure functions): a strand of n beads 13px apart hanging from a pinned top; how many beads hang at x — 6 in the middle rising to 15 at the sides on a 1.3 power, so the curtain is parted like a doorway; and a Verlet step: each free bead keeps its velocity (damped to 98.2%) and falls under 900px/s² gravity, then five passes hold every link to its length (the top bead pinned) and push beads out of the pointer's 30px circle, the push last so it wins, returning how much the strand is still moving. The curtain is a 230px canvas as wide as the section (a ResizeObserver rebuilds it; DPR ≤ 2), with a strand every 15px. Draw a rail across the top, each cord as a thin line through its beads, and each bead as a 4.6px circle with a radial highlight — opaque for coloured beads, mostly clear with a bright glint for glass. The strands start with a slight sway. A pointermove on the section feeds the pointer to the simulation while it's over the curtain; the loop runs only while the pointer is in it or the strands are still moving, and only while the section is on screen. Reduced motion draws the curtain hanging still. Body: centred and pulled up 70px into the parting — an eyebrow in wide-spaced capitals, a large italic serif title, a muted lead and one pill link in the accent with an arrow that nudges on hover. Selected variant — Amber (amber): Amber, honey and brown beads on a dark brown #1d140c section, cream ink #f7ead6 and a honey #f3c46b button with dark text. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Move the pointer through the curtain to part the strings; the link works as normal. Motion: Strands swing on a Verlet simulation and settle after a few seconds. Reduced motion keeps them hanging still. Accessibility: A labelled section with one real link; the curtain is decorative and hidden. Text keeps 4.5:1 contrast in every palette. Responsive behavior: The curtain is rebuilt for any width with a strand every 15px; the copy rises less far into it on phones. Touch: Touch scrolls the page normally; the curtain still sways in on load. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Move the pointer through the curtain to part the strings; the link works as normal.

Motion

Strands swing on a Verlet simulation and settle after a few seconds. Reduced motion keeps them hanging still.

Accessibility

A labelled section with one real link; the curtain is decorative and hidden. Text keeps 4.5:1 contrast in every palette.

Responsive

The curtain is rebuilt for any width with a strand every 15px; the copy rises less far into it on phones.

On touch

Touch scrolls the page normally; the curtain still sways in on load.