Templates
Animated React Templates
Complete, ready-to-ship page templates assembled from Crucible components. Each template is TypeScript and Tailwind throughout, installable by copy-paste or CLI. Every animated part respects prefers-reduced-motion, so the layout reads cleanly with motion turned off.
A monochrome-elegant portfolio one-pager: oversized editorial hero, an indexed selected-work list with a cursor-following gradient art panel, services strip, studio statement, and a magnetized contact footer — all props-driven with one brass accent.
A split-screen sign-in / create-account template: a branded left panel (logo, an oversized value line, checkmarked highlights, and a soft WebGL gradient mesh) beside a centered card that toggles between Sign in and Create account. Labeled email + password fields with a reveal toggle, a genuine validating submit (email format + minimum length, a pending state, and an aria-live error slot), an OAuth / SSO row of generic providers, plus forgot-password and switch-mode links. One signature accent knob; the WebGL surface freezes and every reveal pins its resting pose under reduced motion; the brand panel hides below lg where a compact brand header sits above the full-width card.
An editorial blog home template: a serif masthead with slim nav and a subscribe button, a two-column featured essay over graded cover art with an Anneal headline, a recent-posts grid of Kindle spotlight cards with topic chips and initials bylines, a browse-by-topic rail, a newsletter sign-up card, and a multi-column footer — every string a prop, one warm-terracotta accent knob.
A developer-tool docs landing template: slim nav, Cipher-scrambled headline, copy-to-clipboard install pill, a fake terminal that types a query session line-by-line, Kindle quickstart cards, a numbers-forward feature strip, CTA band, and footer — every string a prop, one emerald accent knob.
A dense, dark admin/analytics shell for a commerce back office: a collapsible sectioned icon-rail sidebar, a topbar with search, notifications, and user chip, a row of KPI stat cards with odometer count-ups, trend chips, and mini sparklines, a large seeded SVG area chart, a revenue-by-channel bar list, a recent-orders table, and an interactive tasks checklist — every string, series, and row rebrandable through props.
A three-column documentation page template: a grouped left sidebar with the current page highlighted, a center article (breadcrumb, Anneal-revealed title, lead, and rich prose with headings, lists, note/tip/warning callouts, inline code, copyable fenced code blocks, and a self-typing Telegraph terminal), and a right on-this-page rail that scroll-spies the active heading. The rail hides at large-and-below and the sidebar collapses to a mobile disclosure — every string a prop, one cool indigo accent knob.
A complete one-page landing template: hero, stats, features, testimonials, pricing, FAQ, closing CTA, and footer assembled from the seven Crucible section blocks. Rebrand it entirely through props — every section's full API is exposed, and any section can be dropped.
A warm, elegant personal home base: an intro hero with a monogram avatar and a live "now" line, a set of big tappable link rows, a "currently" highlight grid, a recent-writing list, and a magnetized contact footer — link-in-bio meets personal homepage, entirely props-driven with one warm accent.
A full single-page portfolio landing template for a developer or designer: a striking hero (name, role, one-line pitch) over a soft WebGL gradient mesh, a selected-work grid of tilting Facet cards, a count-up metrics band, an about + skills section, a compact experience timeline, and a contact footer — every string a prop, one cool indigo accent knob, fully reduced-motion-safe.
A full premium-dark pricing page: eyebrow + headline + subhead header with a real keyboard-operable monthly/annual toggle that live-updates every price, a three-tier plan-card row with one accent-ringed most-popular card and per-tier feature checklists and CTAs, a grouped feature-comparison table with check/dash cells, an FAQ accordion composed from Fold, and a closing CTA band — every string, tier, comparison row, and FAQ a prop, one cool-indigo accent knob.
A full SaaS / product landing page for the fictional observability platform "Kelvin": sticky nav, a hero over one soft WebGL mesh with an Anneal word-reveal subhead, a logo-cloud strip, a tilting Facet feature grid, a bento "how it works" section with faux telemetry art, a Tally count-up metrics band, a Rostrum testimonial rotator, a three-tier pricing teaser, a closing CTA band, and a multi-column footer — every string a prop, one cool azure accent knob, fully reduced-motion-safe.
A dark, dense SaaS dashboard shell: collapsible icon-rail sidebar, topbar with search, notifications, and user chip, spotlight stat cards with odometer count-ups, a pure-CSS bar-chart panel with sliding range tabs, a recent-activity feed, and a services table — every region rebrandable through props.