feat(registry): add the loader line fold, loader iris ring and testimonial ring blocks

[moshiur01]

Adds three blocks: two first-load preloaders ported from the Prisma and Kairo templates, and Kairo's 3D testimonial ring. All three are dressed in the Tween UI palette and ship with gallery media.

Loader Line Fold

• The wordmark rises letter by letter out of its masks while a lime hairline fills along the bottom edge, with a zero-padded counter riding its tip.
• Honest progress. The counter eases to 90% over minDuration, then waits for ready (by default document.fonts plus a decode() of every image inside, capped at 6s) before running the last 10%.
• The line travels to the middle, folds into a point, and the page opens out of it through an even-odd clip-path hole, width leading height, while the content settles from a dim 125% zoom.
• Opens onto a white placeholder hero ("Your awesome hero here"). Sidebar icon fold-horizontal, with a new squeeze hover motion.

Loader Iris Ring

• A ring gauge sweeps through uneven steps in one continuous tween. Kairo ran eleven separate eased tweens, so the arc nearly stopped at every step. The percentage is read off the arc, so the two never disagree.
• Tech photos flash through the lens while four corner counters (components, blocks, test suites, motion-safe items) sync and go live on Number Flow.
• An iris mask opens from the lens, and the ring flies into the nav mark. The landing spot is measured with the page at its settled scale, since the page is still zooming in mid-flight. The ring also takes on the mark's colours, so it stays visible against the white hero.
• IrisRingMark is exported; any element with data-loader-target works. Without a target the ring swells and fades instead. Sidebar icon loader-circle (spin).

Testimonial Ring

• Cards stand on a 3D ring over a reflecting grid floor. Drag it with inertia and a snap, use the arrow buttons or ←/→, click a side card, or scroll. The front card's quote blurs in and its metric rolls on Number Flow.
• A lime Drag plate replaces the cursor only while a mouse is over a card. It squeezes to "Spin" when grabbed and leans like jelly into the pull. It's re-checked every frame, so it follows a ring that turns under a still pointer. Touch screens keep the native cursor.
• Sidebar icon cylinder (flip).

Worth calling out in review

• Loaders fill their own section by default, so they work in the docs preview and its Replay button. fullscreen covers the viewport and locks page scroll for a real first load. onComplete replaces the source templates' hero gates.
• Two bugs fixed from Kairo's ring: click-to-front never worked there, because pointer capture retargets pointerup to the stage (it now hit-tests under the pointer), and a section that loaded already in view started on the second card (scroll rotation now counts from the load position).
• Sample content is fictional. The testimonial people and companies are invented, as in the other testimonial blocks, and the docs page says so. Photos are from Unsplash.
• Gallery media: the recordings were wider than 16:10, so each keeps its full width and the top and bottom are extended from the edge pixels, rather than cropping off the loader's corner counters. The system pointer, the Next.js dev badge, the loading bar and the recording border are removed. The testimonial clip is trimmed to 8.1s and ends on its opening state so it loops cleanly. Clips are 129 KB, 72 KB and 465 KB.

Under prefers-reduced-motion: reduce: no loader at all (onComplete fires at once); the ring steps straight to each card with no spin, blur, roll or drag plate.

Checks

Typecheck is clean, registry:build passes and the full test suite passes (899 tests, 36 new across the three blocks). Each block was checked in headless Chrome at desktop and phone widths. next build was not run locally.

[vercel]

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

Project	Deployment	Actions	Updated
tween-ui	Ready	Preview	Oct 7, 2026 5:56am UTC