Sections
Animated React Section Blocks
Drop-in hero, feature, FAQ, and pricing blocks that compose into full React pages. Each section is a single TypeScript file styled with Tailwind, ready to copy-paste or install with the CLI. They honor prefers-reduced-motion with designed static fallbacks and forward className for easy theming.
A disclosure-semantic FAQ accordion: measured height animation via motion, a hairline amber heat-line down the open item's left edge, and a plus indicator that rotates with a brief ember-glow on toggle. Arrow-key/Home/End focus movement between questions, one open at a time by default with an allowMultiple knob, instant open/close with no glow under reduced motion.
A live monitoring feature grid: a hairline-bordered 2×2 of living data vignettes — a giant odometer-rolling uptime stat, a self-drawing latency chart, a pulsing world map with landing arcs, and a scrolling activity feed — booting in a diagonal stagger from the headline stat, then settling to a low idle intensity. Composed from Tally, Plotter, Mercator, and Wire; panels accept custom children.
The closing call-to-action band: headline and subhead over a contained, subtle Ember rise, an Anvil-struck primary CTA beside a quiet secondary link, and a one-shot Sparks burst fired the first time the band scrolls into view (IntersectionObserver, once, skipped under reduced motion). All copy and both effects are prop-controlled.
A neutral-elegant FAQ accordion of soft stacked cards: the open row lifts a hair off the stack, its chevron spins up in one accent hue, and the answer unfolds by hinging down from the top edge over a measured height animation. Full disclosure semantics with aria-expanded/aria-controls, labelled region panels, and Up/Down/Home/End focus movement; single-open by default with a singleOpen knob; instant open/close with the open row resting lifted under reduced motion.
The flagship landing hero: logo + nav header, a gilded headline and subhead over the Molten shader pour, and an Anvil-struck primary CTA beside a quiet secondary link. Every content knob is a prop — the Forgewright copy is only the default — and the background node is fully swappable.
A bento features section: six feature cells with minimal forge-tool stroke icons laid out on the IngotGrid primitive with varied column spans, a Conduit beam flourish tracing push → pour in the lead cell, and staggered Surface melt reveals as cells scroll into view.
A trusted-by logo cloud section in three variants: a marquee belt composed from Frieze, a grid whose logos ignite from ghost to full contrast in a seeded stamp-landing scatter on scroll-in, and a relay row where one slot at a time plate-flips to a logo not currently shown. Marks sit grayscale and dimmed at rest, lift to full contrast on hover, and are height-normalized; eyebrow/heading framing included. Renders as a static full-contrast grid under reduced motion.
A stats band stamped like a steel plate: four big tabular numerals counting up via Tally digit drums on scroll into view, hairline amber dividers between stats, quiet labels beneath, and subtle top/bottom plate borders. Responsive 2-up to 4-up row.
A social-proof section: testimonial quotes on quiet Kindle spotlight cards flowing through velocity-reactive Millrace marquees — two counter-flowing rows on desktop, one on mobile — pausing on hover, with a screen-reader-only static list so each quote is heard once and a static wrapped grid under reduced motion.
An animated testimonials rotator: a fanned stack of portraits shuffles like a hand of cards as it advances — front full-colour, the ones behind cooled to a duotone — while the quote crossfades beside it with words annealing from blur to focus. Autoplays on an interval, pausing on hover, focus, hidden tab and offscreen, with previous/next buttons, dots, a play/pause toggle, arrow-key nav and a paused-only live region. Reduced motion swaps instantly and never autoplays.
A three-tier pricing section: an accessible monthly/annual radiogroup toggle (annual = two months free) flips prices via Tally odometer drums, the featured tier is raised inside a Filament traveling-border card with a Sheen CTA, and quiet bordered cards carry the rest. Custom-priced tiers ignore the toggle. Stacks at 360px, three-up on desktop.