feat(registry): add the kinetic type ring block

[Arifulislam5577]

Adds Kinetic Type Ring, a block whose phrase is wrapped once around a ring built in real 3D.

The block

Every glyph is measured and given an arc as wide as the letter itself, so I and W space evenly rather than sitting on a fixed grid. The type size is solved from the stage so the loop closes at any width, and a ResizeObserver re-solves on any box change — the ring fills the same share of the stage on a phone as in a full-width hero.

A dot falls, squashes on impact, and pulls the letters out of a blur in a sweep that rolls round from the one nearest the camera. After that the ring idles; drag, scroll and the arrow keys add spin that decays back to the idle rate, and the dot swells or shrinks with the push.

Two things worth calling out in review:

• Nothing starts until a solve lands. The first paint usually beats layout, so the intro is gated on the first successful solve — from the observer if need be — rather than playing to a stage it cannot measure.
• One writer per element. The solve owns the outer span's transform, GSAP owns the glyph inside it. Nothing touches both, so a resize mid-intro cannot wipe a tween.

Under prefers-reduced-motion: reduce the ring is laid out and shaded, the dot sits in the middle, and nothing moves. The ring itself is aria-hidden — the phrase reaches screen readers once from a visually-hidden paragraph instead of letter by letter — and the stage is focusable with the arrow keys doing what dragging does.

Preview page

The preview page centred every block in a min-h-svh column, so a block that sizes itself off its parent had no height to read and sat in a band of page background. It now uses a single 1fr row, which offers the screen height instead of imposing it: items-center leaves every other block at the height its content asks for, centred exactly as before.

Checks

• pnpm registry:build — generated files committed, no drift
• pnpm typecheck
• pnpm test — 795 passing, 9 of them new
• pnpm build
• Checked with reduced motion, with the keyboard, and at phone width

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
tween-ui	Ready	Preview	Oct 1, 2026 1:16pm UTC