A chain of pill tabs riding an arc with springy, cascading motion, joined by
crisp metaball connectors. Built as a single self-contained index.html
playground plus a Framer code component.
Live demo: open index.html (or the GitHub Pages link for this repo).
The panel (top right) tunes everything live:
- Speed / Spin delay / Spin push — constant drift plus periodic springy shoves
- Elasticity / Stiffness — the underdamped spring that makes it lurch & settle
- Cascade lag — how much each shove ripples down the chain
- Squash — squash & stretch as pills compress
- Pill spacing — gap between pills, relative to pill width (continuous)
- Connectors — thickness of the gooey metaball necks
- Curvature — −1 full circle down ← 0 straight → +1 full circle up
- Roundness / Pill padding / Scale — pill shape and size
- Pause (or spacebar) — freeze the exact pose; sliders stay live
- Export SVG — download the current frame as true vectors (transparent background, drops straight into Figma)
ArcTabs.tsx is the same animation as a Framer code component: in Framer,
Assets → Code → New Code File, paste the file's contents, then drag the
component onto the canvas. All controls appear as properties. Add the
"Onsite" font to the Framer project for the intended type.