# CleverUI

> CleverUI is a free, MIT-licensed library of 506 React + Tailwind CSS components by Clever Ops (https://cleverops.com.au/components). Components install via the shadcn CLI from a public registry; every payload at https://cleverops.com.au/r/{name}.json carries the full source inline with CORS enabled.

## Setup

Register the registry in components.json:

```json
{
  "registries": {
    "@cleverui": "https://cleverops.com.au/r/{name}.json"
  }
}
```

Then install any component: `npx shadcn@latest add @cleverui/<name>`

## Docs

- [Installation](https://cleverops.com.au/components/installation): registry setup and install paths
- [Registry](https://cleverops.com.au/components/registry): endpoints and payload anatomy
- [Themes](https://cleverops.com.au/components/themes): theme customizer and CSS variables
- [Templates](https://cleverops.com.au/components/templates): ten complete site templates

## Components

- [Ledger Accordion](https://cleverops.com.au/components/interactive/accordion-ledger): A standalone accordion in the ruled-ledger voice, mono indices, right-aligned mono meta figures, hairline rows, and a primary keyline beside the open region. A content container, not a FAQ.
- [Admission Checklist](https://cleverops.com.au/components/education/admission-checklist): What you need to get in and what you can skip, admission requirements as an encouraging two-group checklist with real dl semantics. React and Tailwind block for course sites.
- [Advisor Credentials Rows](https://cleverops.com.au/components/finance/advisor-credentials-row): A financial adviser directory of sober hairline rows, credentials, mono licence numbers, specialty runs and an AFSL disclosure line as the accent. React and Tailwind, zero hype.
- [Agenda Day Picker](https://cleverops.com.au/components/events/agenda-day-picker): Day pills over a single-track agenda, pick a day, read its sessions down a mono time rail. One room, one running order, real tablist semantics.
- [Agent Profile Card](https://cleverops.com.au/components/real-estate/agent-profile-card): An agent card that sells with proof, portrait placeholder, sold count and median days-on-market ticking up in tabular figures, suburbs served as chips, and an appraisal CTA.
- [Agent Status Strip](https://cleverops.com.au/components/ai/agent-status-strip): A slim strip for app headers, agent name, state lamp, a one-line current step that shimmers while running, and an SSR-safe elapsed mono timer that starts post-mount.
- [AI Empty State](https://cleverops.com.au/components/ai/ai-empty-state): Agent session zero state for React AI apps, starter prompt cards, connected-tool chips, and an honest scope note, styled with Tailwind hairline restraint; composes above any composer.
- [Alumni Story Cards](https://cleverops.com.au/components/education/alumni-story-cards): Graduate stories told as career arcs, from old job to new title, a short quote, cohort chip, and hired-in timeline. React and Tailwind alumni proof cards for course sites.
- [Amenity Constellation](https://cleverops.com.au/components/travel/amenity-constellation): Hotel amenities as an airy constellation, icon and serif label pairs grouped by pool, spa and dining, one signature amenity carrying the accent. The whitespace does the luxury.
- [How Booking Works](https://cleverops.com.au/components/health/appointment-steps): How booking works in three or four numbered steps, plain reassuring language, near-still motion, and practical notes like bring your Medicare card. Calm from first click to consult.
- [Which Appointment Should I Book?](https://cleverops.com.au/components/health/appointment-types-panel): Consult types compared in plain language, length and fee in quiet figures, an honest best-for line each, and a calm not-sure fallback. A React and Tailwind decision aid for clinics.
- [Appraisal CTA Panel](https://cleverops.com.au/components/real-estate/appraisal-cta-panel): The what's-your-place-worth conversion block, a single address field with a callback-only submit, a recent-sales proof line in tabular figures, and an agent trust row.
- [Article Card Grid](https://cleverops.com.au/components/blog/article-card-grid): Editorial article cards, mono kicker with category and read time, display titles, a dek line, and initials-avatar bylines. The featured story spans wide inside a hairline frame.
- [Article Header](https://cleverops.com.au/components/blog/article-header): The opening block of a post, category eyebrow, display title, standfirst, and a byline row with preformatted date and read time, closed by a hairline rule that draws itself.
- [Article TOC Rail](https://cleverops.com.au/components/blog/article-toc-rail): Sticky table-of-contents rail for React articles, mono indices, a hairline spine, and a primary tick that slides to the active heading via built-in scroll-spy. Tailwind tokens throughout.
- [ASCII Liquid Field](https://cleverops.com.au/components/lab/ascii-liquid-field): A monospace glyph grid flowing like liquid, a seeded scalar field advects through a curl flow, crests ink in the accent, pointer drags stir it. Self-idling React + Tailwind canvas background.
- [Attorney Profile Rows](https://cleverops.com.au/components/legal/attorney-profile-row): A firm directory of horizontal profile rows, serif names with admission years, focus areas in a middot run, matter counts and a direct line. Letterhead gravitas, not cards with badges.
- [Auction Results Strip](https://cleverops.com.au/components/real-estate/auction-results-strip): Last weekend's auction results as a ruled band, a clearance rate counting up once, then sold and passed-in rows with addresses leading and prices set in tabular figures.
- [Author Bio Card](https://cleverops.com.au/components/blog/author-bio-card): End-of-article author bio for React blogs, mono initials avatar, role, short bio, quiet text links, and a 'More from' reading list with preformatted dates. Tailwind tokens, zero icon clutter.
- [Background Beams](https://cleverops.com.au/components/backgrounds/background-beams): Hairline ink lines flow across the surface while accent pulses travel along them, drafting-table wiring, pure CSS/SVG, deterministic geometry, static under reduced motion.
- [Announce Banner](https://cleverops.com.au/components/banners/banner-announce): Top-of-page announcement bar, one line, one link, one dismiss. Height collapses shut on a callback-driven dismiss, with info and warning variants in honest primary and destructive tokens.
- [Changelog Toast](https://cleverops.com.au/components/banners/banner-changelog-toast): A corner toast announcing a release, version in mono, a one-line note, and a view link. Enters after a set delay, dismisses through a callback, appears instantly under reduced motion.
- [Quiet Cookie Banner](https://cleverops.com.au/components/banners/banner-cookie-quiet): A consent bar without dark patterns, plain-language copy, a Decline button styled exactly equal to Accept, and a quiet policy links row, docked to the bottom edge.
- [Countdown Rail Banner](https://cleverops.com.au/components/banners/banner-countdown-rail): Slim offer rail, one line of copy, an inline mini countdown that rolls its digits, a preformatted end label, and a single CTA. Urgency at strip scale, whisper volume.
- [Preview Mode Banner](https://cleverops.com.au/components/banners/banner-preview-mode): Floating preview-mode pill for React sites, hatched draft swatch, mono PREVIEW label, save meta, and a real Exit button. A fixed Tailwind-token capsule; dismissal causes zero layout shift.
- [Update Prompt Banner](https://cleverops.com.au/components/banners/banner-update-prompt): New-version banner for React apps, one line, a mono version tag, and honest paired Refresh and Later buttons. Height animates shut on dismiss so the Tailwind layout never jumps.
- [Beam Balance](https://cleverops.com.au/components/interactive/beam-balance): A working two-pan beam balance for React, place mono weight chips on either pan, the beam tips with damped torque physics, and equilibrium earns the lamp. Tailwind tokens.
- [Before & After Care](https://cleverops.com.au/components/beauty/before-care-notes): A pre and post appointment care card, two gentle columns headed before you arrive and afterwards, guidance lines in italic serif, and one primary keyline. Practical instructions, beautifully set.
- [Chladni Sand](https://cleverops.com.au/components/backgrounds/bg-chladni-sand): Thousands of sand grains snap into Chladni resonance figures as the plate's mode changes, order out of noise. React canvas background themed entirely by Tailwind tokens.
- [Crosshatch Drift](https://cleverops.com.au/components/backgrounds/bg-crosshatch-drift): Engraver's cross-hatching as weather, drifting lobes of ruled shading build chiaroscuro where they overlap. CSS-only React background on Tailwind tokens, zero per-frame JavaScript.
- [Dendrite Growth](https://cleverops.com.au/components/backgrounds/bg-dendrite-growth): Seeded random walkers freeze into branching mineral dendrites, an accretion frontier tipped in primary with a live particle counter. React canvas background on Tailwind tokens.
- [Flow Field](https://cleverops.com.au/components/backgrounds/bg-flow-field): A storm of ink streams advected through an evolving flow field, one stream in seven burns in the accent, and a fine pointer bends the current around itself. Canvas, 60fps-budgeted.
- [Frost Fern](https://cleverops.com.au/components/backgrounds/bg-frost-fern): Window frost grows in from the frame, anisotropic ice needles branch at 60 degrees, growth tips glowing primary before curing to ink. Seeded React canvas background on Tailwind tokens.
- [Galton Board](https://cleverops.com.au/components/backgrounds/bg-galton-board): A Galton board in drafting ink, beads fall through a hairline peg lattice and build a live bell curve, one primary bead tracing its path. React canvas background on Tailwind tokens.
- [Glyph Tide](https://cleverops.com.au/components/backgrounds/bg-glyph-tide): A field of mono glyphs breathing like liquid, character weight and ink density follow a flowing noise tide, with a current of accent glyphs threading through. Canvas, zero deps.
- [Guilloche Engine](https://cleverops.com.au/components/backgrounds/bg-guilloche): Engine-turned guilloché, layered hypotrochoid lattices precess like banknote engraving, one rosette inked in primary. Pure SVG React background themed by Tailwind design tokens.
- [Halftone Pulse](https://cleverops.com.au/components/backgrounds/bg-halftone-pulse): A print-press halftone field, dot radii swell as slow waves travel the grid, and the pointer raises its own ripple. Ink-on-paper texture turned kinetic, canvas-drawn.
- [Harmonograph](https://cleverops.com.au/components/backgrounds/bg-harmonograph): A damped harmonograph pen traces precessing Lissajous figures that spiral into the sheet, older figures ghosting like ink. Generative React canvas background themed by Tailwind tokens.
- [Isogrid Swell](https://cleverops.com.au/components/backgrounds/bg-isogrid-swell): An isometric grid whose cells lift into low axonometric relief as a slow wave crosses the plane, and the pointer raises its own local swell. Drafting-table 2.5D, canvas, zero deps.
- [Meander Belt](https://cleverops.com.au/components/backgrounds/bg-meander-belt): A river reworks its floodplain, curvature-driven bank migration, neck cutoffs, oxbow lakes drying to scars. Geomorphology as a live React SVG background on Tailwind design tokens.
- [Moire Veil](https://cleverops.com.au/components/backgrounds/bg-moire-veil): Two hairline gratings drift over each other, breeding large moire interference fringes from pixel-scale motion. A pure CSS/SVG React background themed by Tailwind design tokens.
- [Orbit Paths](https://cleverops.com.au/components/backgrounds/bg-orbit-paths): A celestial survey chart, concentric dashed orbit rings carry small bodies at seeded, incommensurate periods, one primary body drawing a decaying trail arc behind it. Canvas, zero deps.
- [Pendulum Field](https://cleverops.com.au/components/backgrounds/bg-pendulum-field): A mounting rail of hairline pendulums swinging at incommensurate periods, phase waves travel down the row, nearly align, and disperse again. One primary bob keeps the beat. Canvas, zero deps.
- [Radar Watch](https://cleverops.com.au/components/backgrounds/bg-radar-watch): A harbour radar keeps watch, a rotating beam wakes phase-locked contact blips over hairline range rings. CSS-only React background on Tailwind tokens, zero per-frame JavaScript.
- [Rain Code Ink](https://cleverops.com.au/components/backgrounds/bg-rain-code-ink): Ink drips fall down a faint column grid with calligraphic gravity, each pools at a seeded baseline and evaporates, one column streaming in primary. Not a Matrix clone. Canvas, zero deps.
- [Scanline Drift](https://cleverops.com.au/components/backgrounds/bg-scanline-drift): Slow plotter scanlines sweep the surface with faint phosphor persistence, every few passes a primary waveform trace rides the sweep and decays like an instrument reading. Canvas, zero deps.
- [Seismograph Drum](https://cleverops.com.au/components/backgrounds/bg-seismograph): A strip-chart seismograph, ruled paper scrolls beneath fixed pens while seeded events swell in primary with mono magnitude stamps. Hybrid SVG and CSS React background on Tailwind tokens.
- [Star Trails](https://cleverops.com.au/components/backgrounds/bg-star-trails): A long-exposure sky integrates live, magnitude-weighted star arcs lengthen in lockstep around an off-frame celestial pole. Hybrid SVG and CSS React background on Tailwind tokens.
- [Static Bloom](https://cleverops.com.au/components/backgrounds/bg-static-bloom): Calm analog grain that occasionally organizes, the static blooms into a brief ordered figure (rings, ruling, or grid) before dissolving back to noise. Sub-3Hz by design. Canvas, zero deps.
- [Tessellate Shift](https://cleverops.com.au/components/backgrounds/bg-tessellate-shift): A hairline triangle tessellation where seeded cells occasionally flip their diagonal and settle, architecture breathing one beam at a time, the freshest flip inked in primary. Canvas, zero deps.
- [Thread Weave](https://cleverops.com.au/components/backgrounds/bg-thread-weave): Vertical warp threads on a drafting sheet with one primary weft line weaving over and under, left to right, settled rows ghost into cloth and fade. Textile drafting energy. Canvas, zero deps.
- [Topographic Drift](https://cleverops.com.au/components/backgrounds/bg-topo-drift): Morphing topographic contour lines, elevation rings redrawn each frame from a slowly evolving noise field, like a survey map breathing. Marching squares on canvas, zero deps.
- [Voronoi Membrane](https://cleverops.com.au/components/backgrounds/bg-voronoi-membrane): A breathing cellular membrane, drifting voronoi walls flex like tissue under glass, and the pointer presses the cells apart. Canvas approximation tuned for 60fps, zero deps.
- [Booking Ritual CTA](https://cleverops.com.au/components/beauty/booking-ritual-cta): An appointment CTA framed as the start of a ritual, a light serif invitation, a softened primary action, and a quiet phone path beside it. Unhurried, sensory, certain of itself.
- [Booking Window Bar](https://cleverops.com.au/components/travel/booking-window-bar): A check-in, check-out and guests summary bar with hairline seams and a serif reserve action, display-only fields from preformatted props, onSearch delegated, zero date-picker weight.
- [Build & Price Summary](https://cleverops.com.au/components/automotive/build-price-summary): A build-and-price recap panel with ledger discipline, base vehicle plus option rows in tabular figures and a drive-away total that counts to rest, deterministic and SSR-exact.
- [Bundle Builder Panel](https://cleverops.com.au/components/ecommerce/bundle-builder-panel): A frequently-bought-together panel for React, structural product thumbs joined by plus glyphs, honest visible checkboxes, preformatted bundle pricing and quiet Tailwind savings type.
- [Confirm Hold Button](https://cleverops.com.au/components/buttons/button-confirm-hold): Press-and-hold confirmation for destructive actions, a radial destructive fill charges while held and fires only past the threshold; releasing early cancels. Holding Space counts exactly the same.
- [Segmented Button Group](https://cleverops.com.au/components/buttons/button-group-segmented): Segmented control drawn like an instrument panel, one hairline frame, a sprung layoutId thumb under the active segment, an indicator lamp, roving tabindex with arrow keys, and cva sizes.
- [Hotkey Button](https://cleverops.com.au/components/buttons/button-hotkey): A React button that binds a real keyboard shortcut, mac-aware kbd chip, aria-keyshortcuts, a typing-context guard, and a remote-press flash when the hotkey fires it.
- [Magnetic Button](https://cleverops.com.au/components/buttons/button-magnetic): Magnetic button done with restraint, at most 8px of pull inside an 80px radius, spring return on leave, and the effect disabled on touch and reduced motion so the hit target stays honest.
- [Progress Button](https://cleverops.com.au/components/buttons/button-progress): A button that becomes its own progress state, idle, a hairline sweep tracing the border while working, a drawn check on success. Controlled state prop with honest aria-busy announcements.
- [Shine Button](https://cleverops.com.au/components/buttons/button-shine): Button whose filled variants carry a single sheen sweep on hover, light passing over a surface. Four variants, three sizes, press feedback, full keyboard focus treatment.
- [Split Button](https://cleverops.com.au/components/buttons/button-split): A self-contained split button for React, filled primary action, hairline-divided menu toggle, and real role=menu keyboard semantics with zero Radix or portal dependencies.
- [Stepper Button](https://cleverops.com.au/components/buttons/button-stepper): A quantity stepper built with React and Tailwind, real spinbutton semantics, held auto-repeat with stated acceleration, direction-aware rolling digits, honest min/max clamping.
- [Undo Window Button](https://cleverops.com.au/components/buttons/button-undo-window): An undo-window button for React, the click commits only after a countdown, with a depleting hairline timer, mono seconds, and an Undo recall that never drops focus.
- [Capability Matrix](https://cleverops.com.au/components/agency/capability-matrix): An agency capability matrix, a seamed hairline grid of disciplines with plain summaries, deliverable receipts and a preformatted proof stat each. A React block themed with Tailwind.
- [Constellation Card](https://cleverops.com.au/components/cards/card-constellation): A card whose border is a constellation, seeded stars joined by hairline segments that twinkle in slow sequence, then re-wire into a new star graph on hover. The frame is the show.
- [Drawer Card](https://cleverops.com.au/components/cards/card-drawer): Card whose bottom edge is a drawer, hover or focus slides a hidden action row up from behind a hairline, click-through safe and permanently open on touch.
- [Frost Wipe Card](https://cleverops.com.au/components/cards/card-frost-wipe): A condensation card for React, the pane mists over with canvas breath, your pointer squeegees it clear, droplets run, and it slowly re-fogs. Tailwind token colors throughout.
- [Hover Index Card](https://cleverops.com.au/components/cards/card-hover-index): Editorial cards fronted by a giant mono index numeral that fills from outline to solid ink on hover or focus, a zero-movement hover language built on clip-path, solid by default on touch.
- [Iris Aperture Card](https://cleverops.com.au/components/cards/card-iris-aperture): A React card with a working camera iris, token-surface blades pivot through real f-stops to unveil the pane on hover, under a live mono aperture readout. Tailwind tokens, mechanical spectacle.
- [Ledger Flip Card](https://cleverops.com.au/components/cards/card-ledger-flip): Card that flips to its ledger side, a mono spec table, on an explicit flip button, with aria-pressed state and a reduced-motion crossfade instead of 3D rotation.
- [Liquid Gauge Card](https://cleverops.com.au/components/cards/card-liquid-gauge): A React metric card filled with token-tinted liquid, pointer motion sloshes the spring-driven meniscus while the fill height plots the real value. Tailwind-only material gauge.
- [Magnetic Cluster](https://cleverops.com.au/components/cards/card-magnetic-cluster): A cluster of small cards with social physics, hover one and its neighbors lean two to three degrees toward it on springs, deferring to the focus. The group reacts as a field.
- [Moire Veil Card](https://cleverops.com.au/components/cards/card-moire-veil): A React card veiled by two hairline plates whose misalignment breeds moiré bands, pointer drift shears the top plate so interference sweeps the surface. Pure Tailwind tokens.
- [Receipt Card](https://cleverops.com.au/components/cards/card-receipt): Content set as a printed receipt, perforated top edge, dashed mono ledger lines, an accountant's rule before the total, and a stamp that rotates in once after the rows print.
- [Refraction Card](https://cleverops.com.au/components/cards/card-refraction): Content behind a simulated glass pane, token-built backdrop ghosts split a pixel apart against the pointer, fringing like dispersion under a gliding specular band. Glass without WebGL.
- [Signal Card](https://cleverops.com.au/components/cards/card-signal): Status card with a live keyline, one short accent segment circulates the card perimeter via SVG pathLength, slow and steady, built for dashboards and monitor pages.
- [Spotlight Card](https://cleverops.com.au/components/cards/card-spotlight): Card with a primary-tinted spotlight that follows the pointer while the hairline border brightens beneath it. Touch and keyboard users get a designed fallback glow.
- [Stack Shuffle Card](https://cleverops.com.au/components/cards/card-stack-shuffle): A fanned deck of three to five cards where explicit controls shuffle the next card forward on a spring arc, inert back faces, arrow-key support, and polite position announcements.
- [Depth Tilt Card](https://cleverops.com.au/components/cards/card-tilt-depth): Card that tilts toward the pointer while kicker, keyline, and content ride separate translateZ planes, quiet 3D depth capped at 6 degrees, glare-free by design.
- [Time Echo Card](https://cleverops.com.au/components/cards/card-time-echo): Hover slides two ghosted past states out from behind the card, prior values at fading opacity with mono timestamps, so one metric wears its history. Temporal depth, not decoration.
- [Window Frame Card](https://cleverops.com.au/components/cards/card-window-frame): Card as a window, a static hairline frame around an aperture where a token-built scene shifts up to 6px against the pointer, under a mono sill caption. Calm depth with zero tilt.
- [Who You'll See](https://cleverops.com.au/components/health/care-team-intro): A who-you'll-see panel pairing practitioner roles, GP, practice nurse, physio, with plain one-line explanations of what each actually does, demystifying the visit before it happens.
- [Cart Summary (Drawerless)](https://cleverops.com.au/components/ecommerce/cart-summary-drawerless): An order summary that lives on the page, line items with real stepper buttons, a promo line, and a totals ledger in tabular figures; fully controlled via callbacks, zero state deps.
- [Case Results Band](https://cleverops.com.au/components/legal/case-results-band): An anonymized results strip, large tabular outcomes like $4.2M recovered counting up once with measured restraint between hairline seams, over a formal disclaimer line.
- [Case Study Spread](https://cleverops.com.au/components/agency/case-study-spread): A one-engagement case study spread, the client name in display type beside counted result metrics, scope receipts and an attributed quote. React and Tailwind, work-first.
- [Centrifugal Governor](https://cleverops.com.au/components/interactive/centrifugal-governor): A working centrifugal governor for React, drive the power lever, flyweights rise and the valve trims the spin until it settles governed. ARIA slider semantics, Tailwind tokens.
- [Challenge Countdown Panel](https://cleverops.com.au/components/fitness/challenge-countdown-panel): A gym challenge block that starts the clock, bold condensed challenge name, an SSR-safe rolling countdown to a prop-driven start date, stakes line and spots left. React and Tailwind.
- [Chef Story Strip](https://cleverops.com.au/components/restaurants/chef-story-strip): A provenance strip, the chef's name set in serif, one italic paragraph of kitchen philosophy, and a still small-caps line of the farms that supply the menu. Stillness as the trust signal.
- [Cinematic Handover](https://cleverops.com.au/components/lab/cinematic-handover): A directed match-cut between two full-bleed React scenes, scroll scrubs a hairline figure that travels and grows from scene A into scene B's focal element. Reversible, Tailwind-themed.
- [Citation Rail](https://cleverops.com.au/components/ai/citation-rail): Inline numbered source chips paired with a rail of sources, favicon placeholder, domain, and title, plus a keyboard-accessible snippet peek on hover or focus.
- [Class Timetable](https://cleverops.com.au/components/fitness/class-timetable): A weekly timetable with gym-wall energy, bold condensed class names, mono start times, coach lines, five-dot intensity marks, and a spots-left state that makes you book now.
- [Clinic Locations Strip](https://cleverops.com.au/components/health/clinic-locations-strip): Multi-location clinic strip, suburb name, plain street address, a practical parking note, and an hours snippet in quiet mono per location, closed by one gentle closest-to-you hint.
- [Services & Fees](https://cleverops.com.au/components/health/clinic-services-menu): Clinic services set with menu discipline, plain-language descriptions, consult length and fee in tabular figures, and quiet notes like GP referral required. Zero jargon, high clarity.
- [Coach Cred Strip](https://cleverops.com.au/components/fitness/coach-cred-strip): A certifications strip that treats coaching credentials as data, cert codes in mono with sr-only expansions, years and clients in tabular figures, and one lead-coach keyline.
- [Coach Roster](https://cleverops.com.au/components/fitness/coach-roster): Trainer cards with a coach's confidence, bold uppercase names over structural portrait panels, specialty chips, certifications as mono marks, and a book-your-intro CTA per card.
- [Cocktail List Spread](https://cleverops.com.au/components/restaurants/cocktail-list-spread): Cocktail menu React component set as a bifold bar list, serif drink names, italic builds, mono spec lines and prices across a two-column Tailwind spread.
- [Cohort Countdown Strip](https://cleverops.com.au/components/education/cohort-countdown-strip): An enrolment-closing strip, seats left, a preformatted close date, and a compact rolling countdown pointing at one warm CTA. Encouraging urgency, not a fire alarm.
- [Collection Filter Bar](https://cleverops.com.au/components/ecommerce/collection-filter-bar): A controlled filter-and-sort toolbar for React product grids, aria-pressed Tailwind chips with honest counts, a native sort select, a live results tally and one quiet accent.
- [Command Hint Bar](https://cleverops.com.au/components/interactive/command-hint-bar): A command-K hint bar that opens a compact command sheet, static list from props with a filter input, arrow-key selection, and Escape, real keyboard semantics without the cmdk weight.
- [Commission Breakdown Sheet](https://cleverops.com.au/components/real-estate/commission-breakdown-sheet): Agent fees in full view, commission rate as the hero figure, itemised campaign costs in a ruled Tailwind ledger, and a payable-at-settlement note. React transparency block.
- [Consultation Intake Panel](https://cleverops.com.au/components/legal/consult-intake-panel): An initial-consultation panel, what to bring as a ruled list, a serif-italic confidentiality note, a plain fee line, and one formal action. Nearly still, certain of itself.
- [Contact Callback Strip](https://cleverops.com.au/components/contact/contact-callback-strip): Slim request-a-callback band in React, one tel field, a morning or afternoon window picker and an honest callback promise, collapsing to a confirmation. Tailwind micro form.
- [Contact Channel Cards](https://cleverops.com.au/components/contact/contact-channel-cards): Pick-your-channel contact tiles, email, call, visit, each a working link with a quiet response-time promise; the single recommended channel carries the primary keyline.
- [Contact Email Spotlight](https://cleverops.com.au/components/contact/contact-email-spotlight): Minimal contact block that commits to one channel, the email address set at display scale as a working mailto with copy-to-clipboard and a quiet response promise. React + Tailwind.
- [Contact Project Brief](https://cleverops.com.au/components/contact/contact-project-brief): Project inquiry form that composes a brief, radio-chip fieldsets for type, budget and timeline with a live mono summary line. An honest React and Tailwind contact form for agencies.
- [Contact Split Map](https://cleverops.com.au/components/contact/contact-split-map): Contact section with a token-drawn SVG map, abstract street grid, primary pin, office switcher, and working tel, mailto and directions links. React + Tailwind, no map embed.
- [Contact Split Panel](https://cleverops.com.au/components/contact/contact-split-panel): Seam-divided contact section, left a form done right with visible labels and honest validation, right the office in mono: hours, address, working tel and mailto links.
- [Context Meter](https://cleverops.com.au/components/ai/context-meter): Context-window usage meter, a hairline bar with a tabular tokens-used/limit readout and per-source breakdown rows, shifting to an honest warning treatment at 85 percent.
- [Context Morph Cursor](https://cleverops.com.au/components/lab/context-morph-cursor): A page-level cursor companion for React, spring-morphs between caret, halo, grip, and crosshair postures from the element under the pointer. Never hides the native cursor. Tailwind tokens.
- [Contour Drift](https://cleverops.com.au/components/lab/contour-drift): A living topographic survey sheet: seeded simplex terrain drifts like weather under marching-squares contour hairlines, one surveyed band lit in primary, the cursor gently swelling the land.
- [Course Card Grid](https://cleverops.com.au/components/education/course-card-grid): Friendly course cards with level chips, duration and next-cohort lines, outcome checklists, and one warm enrol CTA per card, the encouraging way a training site earns sign-ups.
- [Coverage Explainer Panel](https://cleverops.com.au/components/finance/coverage-explainer-panel): An insurance coverage disclosure panel in React, inclusions with preformatted limits, exclusions at equal weight, a plain excess line and a PDS note. Tailwind, no fine-print burial.
- [Beam CTA](https://cleverops.com.au/components/cta/cta-beam): Closing CTA where an ink rule draws itself across the page and a single accent pulse travels along it. One line, one accent, one action, reduced motion gets a static rule.
- [Calendar Slot CTA](https://cleverops.com.au/components/cta/cta-calendar-slot): Book-a-time CTA offering three preformatted next-available slots as pills with a fallback link, calendar energy through callbacks alone, no scheduling dependency.
- [Checklist Close CTA](https://cleverops.com.au/components/cta/cta-checklist-close): Closing CTA that qualifies before it converts, three 'you're ready if' checklist items tick in sequence before the button gets its turn. Qualification as persuasion.
- [Claim Handle CTA](https://cleverops.com.au/components/cta/cta-claim-handle): Namespace-claim CTA, type a handle and the live mono URL preview assembles ahead of one accent claim button. React and Tailwind capture with real form semantics throughout.
- [Command Copy CTA](https://cleverops.com.au/components/cta/cta-command-copy): Developer install CTA, package-manager tabs switch one mono command line with a copy-to-clipboard affordance and a quiet docs link. A React and Tailwind closer for dev tools.
- [Final Word CTA](https://cleverops.com.au/components/cta/cta-final-word): End-of-page CTA built around one oversized short statement where a single word earns a drawn primary underline, closed out by dual buttons on a hairline baseline.
- [Inline Banner CTA](https://cleverops.com.au/components/cta/cta-inline-banner): Mid-article inline CTA, a quiet hairline card with one sentence and an arrow-link, sized to the prose column. The anti-popup, placed where the reading happens.
- [Next Steps CTA](https://cleverops.com.au/components/cta/cta-next-steps): Closing CTA that shows what happens after the click, a three-step runway with honest mono timing chips ahead of the ask. Trust-first React and Tailwind conversion section.
- [Quote Request CTA](https://cleverops.com.au/components/cta/cta-quote-request): B2B quote-request band, email plus one context select, a response-time promise in mono, and a single accent submit. Two fields between a prospect and a number.
- [Split Decision CTA](https://cleverops.com.au/components/cta/cta-split-decision): Two-path CTA section with mirrored panels, self-serve versus done-for-you, where hovering one path visibly weights the layout toward that decision.
- [Spotlight Form CTA](https://cleverops.com.au/components/cta/cta-spotlight-form): Email-capture CTA where the field sits inside a spotlight card, a pointer-tracked mask glow warms the surface around the input, pulling every eye to the one action.
- [Ticker Bar CTA](https://cleverops.com.au/components/cta/cta-ticker-bar): Slim full-width conversion bar built to sit mid-page, a single-line rotating proof ticker beside one button, separated by hairlines from surrounding sections.
- [Curriculum Outline](https://cleverops.com.au/components/education/curriculum-outline): A module-by-module curriculum accordion, week markers, lesson counts, and honest 'what you'll build' notes behind real disclosure semantics. A syllabus students can trust.
- [Survey Crosshair](https://cleverops.com.au/components/cursors/cursor-crosshair-survey): Full-viewport drafting crosshair, hairline axes track the pointer with mono coordinate readouts in the margins, and hovering targets snaps brackets around them.
- [Drafting Arm](https://cleverops.com.au/components/cursors/cursor-drafting-arm): A drafting-machine arm bolted to the viewport corner reaches the pointer, two hairline links solved by real IK, joint discs, and spring lag. React page companion on Tailwind tokens.
- [Echo Rings](https://cleverops.com.au/components/cursors/cursor-echo-rings): Every click drops a stone in the page, concentric hairline rings ripple out from the point and dissolve, with a soft accent pulse at the center. Sonar for the UI.
- [Pointer Galvanometer](https://cleverops.com.au/components/cursors/cursor-galvanometer): A docked galvanometer meters the pointer, a ballistic needle kicks across a graduated arc with cursor speed, a primary peak-hold tick decays behind it. React + Tailwind tokens.
- [Glyph Wake](https://cleverops.com.au/components/cursors/cursor-glyph-wake): The pointer leaves a wake of mono glyphs, characters condense along the path, hold for a breath, and evaporate. Typography as vapor trail.
- [Goo Cursor Trail](https://cleverops.com.au/components/cursors/cursor-goo-trail): A chain of accent blobs chases the cursor through an SVG goo filter, merging, stretching, splitting like liquid ink. Touch devices get an autonomous lava-lamp drift.
- [Ink Comet](https://cleverops.com.au/components/cursors/cursor-ink-comet): The cursor tows a comet of ink, a canvas particle tail that thickens with speed, sheds droplets on hard turns, and dries to nothing when you stop.
- [Measure Tape](https://cleverops.com.au/components/cursors/cursor-measure-tape): Hold and drag to pull a live measuring tape, a ticked hairline from drag origin to pointer with a mono px readout and angle that evaporates on release. A drafting instrument as play.
- [Orbit Satellites](https://cleverops.com.au/components/cursors/cursor-orbit-satellites): Two or three tiny satellites orbit the pointer on offset periods, trailing slightly on fast moves and tightening formation over links and buttons, affordance as gravity.
- [Plumb Line](https://cleverops.com.au/components/cursors/cursor-plumb-line): A surveyor's plumb bob hangs from the pointer on a hairline string, true damped pendulum physics, a live degree readout, and a PLUMB reward for holding still. React + Tailwind tokens.
- [Quill Stroke](https://cleverops.com.au/components/cursors/cursor-quill-stroke): The pointer becomes a broad-nib quill, one continuous ink ribbon whose width swells and thins with speed and stroke direction, drying from the tail. Calligraphy physics, not confetti.
- [Registration Marks](https://cleverops.com.au/components/cursors/cursor-registration-marks): A printer's registration mark rides the pointer, its ink plates drift out of register with velocity and snap back into one crisp mark at rest. React cursor toy on Tailwind tokens.
- [Ripple Grid](https://cleverops.com.au/components/cursors/cursor-ripple-grid): The page hides a dot lattice that only motion reveals, dots surface near the pointer while movement pumps rings of brightness rippling outward through the grid before it sleeps again.
- [Destination Tabs](https://cleverops.com.au/components/travel/destination-tabs): Destination tabs for travel sites, serif place names on a hairline rail, evocative intros and quiet fact pairs per place. Accessible React tabs themed with Tailwind tokens.
- [Diff Approval Block](https://cleverops.com.au/components/ai/diff-approval-block): An agent's proposed change as reviewable hunks, mono before/after lines with token-honest added and removed tints, per-hunk approve/reject callbacks, and j/k keyboard navigation.
- [Dock Tray](https://cleverops.com.au/components/interactive/dock-tray): Bottom utility dock of icon buttons with restrained proximity magnification, springy, capped at 1.4x, mono label tooltips, and arrow-key navigation that never needs the zoom.
- [Donation Tier Grid](https://cleverops.com.au/components/nonprofit/donation-tier-grid): Honest donation tiers in a seamed React grid, preformatted amounts bound to concrete outcomes, nothing preselected, no guilt copy, one quiet accent. Tailwind, dark-pattern-free.
- [Dual Axis Chapters](https://cleverops.com.au/components/lab/dual-axis-chapters): A pinned React stage where one scroll value drives two geared axes, chapters advance vertically while a marker filmstrip slides in counterpoint, with a live mono ratio readout. Tailwind-themed.
- [Event CFP Block](https://cleverops.com.au/components/events/event-cfp-block): A call-for-proposals block, poster heading, mono deadline rail, talk formats with durations, and one submit CTA. React and Tailwind CFP section for conference sites.
- [Event Code of Conduct](https://cleverops.com.au/components/events/event-code-of-conduct): A code-of-conduct and accessibility block, a confident pledge set large, provisions as a dl grid, and real report channels. React and Tailwind trust section for events.
- [Event Countdown Hero](https://cleverops.com.au/components/events/event-countdown-hero): The event's own countdown hero, oversized date numerals, a mono venue line, poster-scale rolling countdown digits, and one ticket CTA. Doors open in exactly this long.
- [Event Lineup Board](https://cleverops.com.au/components/events/event-lineup-board): A poster-type lineup board, acts in oversized weight-contrast rows, stage and time in mono, day tabs with real tablist semantics. The bill is the artwork.
- [Event Past Editions](https://cleverops.com.au/components/events/event-past-editions): Past editions as a typographic reel, years set huge, cities in mono, one headline moment and attendance per row. A React and Tailwind pedigree block for event sites.
- [Event Schedule Tracks](https://cleverops.com.au/components/events/event-schedule-tracks): A multi-track agenda, mono time rail against parallel track columns that collapse into one accessible chronological list on mobile. Conference wayfinding, poster confidence.
- [Event Ticket Tiers](https://cleverops.com.au/components/events/event-ticket-tiers): GA and VIP tickets as perforated stub cards, mono serials, tabular prices, and an honest sold-out state. Box-office paper, not SaaS pricing chrome.
- [Event Venue Strip](https://cleverops.com.au/components/events/event-venue-strip): A venue and date info band, oversized date numerals, doors time in mono, transit notes, and an add-to-calendar affordance. The poster's fine print, set proud.
- [Event Workshop Grid](https://cleverops.com.au/components/events/event-workshop-grid): Workshop and breakout sessions as poster cards, room and time in mono, level chips, seats-left urgency, and an honest waitlist state. React and Tailwind grid for conferences.
- [FAQ Carousel](https://cleverops.com.au/components/faq/faq-carousel): One-question-at-a-time FAQ deck for React, editorial type, mono counter, hairline progress, strictly manual prev/next. A calm Tailwind alternative to accordion walls.
- [FAQ Disclosure List](https://cleverops.com.au/components/faq/faq-disclosure-list): The accordion FAQ perfected, real disclosure semantics over hairline rows, mono two-digit numbering earned by most-asked order, multi-paragraph answers, optional single-open.
- [FAQ Inline Search](https://cleverops.com.au/components/faq/faq-inline-search): Searchable FAQ section for React, type-to-filter with live match highlighting, a mono result count, and an empty state that hands off to support. Tailwind hairline rows, no search backend.
- [Parents FAQ](https://cleverops.com.au/components/education/faq-parents): The questions parents and skeptics actually ask, accreditation, refunds, job outcomes, answered plainly behind real disclosure semantics, with a talk-to-a-human fallback.
- [FAQ Split Detail](https://cleverops.com.au/components/faq/faq-split-detail): Master-detail FAQ for React, question rail on the left, full answer stage on the right, a sliding hairline marker and real arrow-key tab semantics. Tailwind, reading-first.
- [FAQ Topic Index](https://cleverops.com.au/components/faq/faq-topic-index): Grouped FAQ with a sticky topic index, scrollspy rail, anchor jumps, every answer visible in dl semantics. A documentation-grade FAQ section in React and Tailwind.
- [Two-Column FAQ](https://cleverops.com.au/components/faq/faq-two-column): Static two-column FAQ that hides nothing, every answer visible and scannable, questions in medium weight over quiet answers, mono category micro-labels. No accordions.
- [Farm Provenance Index](https://cleverops.com.au/components/restaurants/farm-provenance-index): Farm-to-table suppliers index for React, producers set as a serif sourcing document with place and distance in mono. Tailwind-tokened provenance, no logos.
- [Accordion Stage](https://cleverops.com.au/components/features/feature-accordion-stage): Feature accordion synced to a stage, expanding a row swaps the token-built preview beside it, one open at a time, height animated without jank.
- [Before After Strip](https://cleverops.com.au/components/features/feature-before-after-strip): A narrow strip pairing the old way against your product in two mirrored quiet columns, each pain struck through as its counterpart lands with a check.
- [Bento Feature Grid](https://cleverops.com.au/components/features/feature-bento): A bento grid drawn like a drafting table, tiles share single hairline seams instead of floating as glow cards. Staggered reveal, quiet hover shift, wide and tall spans.
- [Callout Figure Features](https://cleverops.com.au/components/features/feature-callout-figure): Annotated product figure for React marketing pages, numbered leader lines tie a token-built Tailwind mock to margin notes, so every feature claim points at the pixel it explains.
- [Inventory Wall Features](https://cleverops.com.au/components/features/feature-inventory-wall): The everything-included wall for React landing pages, dozens of small capability chips grouped under mono Tailwind labels with counts, breadth made visible in one ruled sweep.
- [Layer Stack Features](https://cleverops.com.au/components/features/feature-layer-stack): Architecture layer stack for React product pages, skewed Tailwind planes pile the system into a flat axonometric diagram, each layer wired to a margin note.
- [Ledger List Features](https://cleverops.com.au/components/features/feature-ledger-list): Features as a ruled ledger, mono index, name, and one-line value statement per row with a right-aligned shipped/beta status. Dense, scannable, no grid.
- [Metrics Fusion Features](https://cleverops.com.au/components/features/feature-metrics-fusion): Feature rows fused with proof, every capability carries its own counting mini-stat in tabular figures, so the claim and its evidence share one line.
- [Module Tree Features](https://cleverops.com.au/components/features/feature-module-tree): Product surface mapped as a module tree, hairline branch elbows and nested lists give React and Tailwind sites a file-tree of capabilities with real one-liners.
- [Orbit Map Features](https://cleverops.com.au/components/features/feature-orbit-map): A central product node with feature satellites wired by hairline SVG edges that draw themselves in, every node is real content, the architecture made visible.
- [Pinned Rail Features](https://cleverops.com.au/components/features/feature-pinned-rail): Sticky narrative column on the left while feature cards scroll past on the right, the copy holds the argument as the evidence flows. Scrollytelling without the framework.
- [Platform Matrix Features](https://cleverops.com.au/components/features/feature-platform-matrix): Feature availability matrix for React product sites, capabilities as rows, platforms as columns, tri-state Tailwind-token cells for shipped, partial, and planned. Docs-grade truth.
- [Spec Sheet Features](https://cleverops.com.au/components/features/feature-spec-sheet): Product capabilities as an engineering datasheet, sectioned definition-list specs inside a double-ruled drafting frame with a mono title block, in React and Tailwind.
- [Steps Path](https://cleverops.com.au/components/features/feature-steps-path): A numbered process where a hairline path literally draws the route between steps as you scroll, order made visible, each milestone settling in turn.
- [Tabbed Feature Stage](https://cleverops.com.au/components/features/feature-tabs-stage): Feature tabs with a live stage, switching tabs morphs a token-built product panel between states, with the active tab carried by a sliding thumb.
- [Terminal Rows Features](https://cleverops.com.au/components/features/feature-terminal-rows): Alternating feature rows for developer tools built with React and Tailwind, each capability argued in copy and proven beside a token-built terminal pane with typed command and output.
- [Fee Structure Sheet](https://cleverops.com.au/components/legal/fee-structure-sheet): A law firm fee disclosure sheet, fixed, hourly and no-win-no-fee columns with plain-English terms and honest figures. React and Tailwind, zero pricing-card urgency.
- [Fees & Rebates](https://cleverops.com.au/components/health/fees-rebates-table): An honest fee transparency table, consult fee, Medicare rebate, and the out-of-pocket gap in true table semantics with tabular figures. React and Tailwind disclosure for clinics.
- [Film Grain Stack](https://cleverops.com.au/components/lab/film-grain-stack): A filmic wrapper for React content, seeded token-inked grain cycled under 3Hz, a token-derived vignette, and ±1px gate weave; grain stays ≤0.12 opacity so text contrast survives. Tailwind-themed.
- [Finance Repayment Panel](https://cleverops.com.au/components/automotive/finance-repayment-panel): A dealership finance estimator in React, deposit stepper, term radiogroup and frequency toggle drive a Tailwind-set repayment figure that counts to rest, with honest fine print.
- [Accordion Sitemap Footer](https://cleverops.com.au/components/footers/footer-accordion-sitemap): A deep sitemap footer that stays honest on phones, open Tailwind link columns at desktop collapse into true disclosure accordions below lg, React button semantics intact.
- [Atlas Footer](https://cleverops.com.au/components/footers/footer-atlas): A global-presence footer for React sites, offices with mono coordinates, addresses, and dl contact pairs beside Tailwind directory columns, closed by a quiet legal rail.
- [Blueprint Block Footer](https://cleverops.com.au/components/footers/footer-blueprint-block): The footer as an engineering drawing's title block, a hairline grid of zones for brand, revision, field pairs, socials, and legal. The drafting identity literalized.
- [Conversation Footer](https://cleverops.com.au/components/footers/footer-conversation): A footer that opens a conversation, a serif "Still reading? Let's talk." line with an oversized email link as the hero, quiet links beneath. The footer as an invitation.
- [Curtain Reveal Footer](https://cleverops.com.au/components/footers/footer-curtain-reveal): The page lifts like a curtain to reveal the footer waiting underneath, a fixed backstage layer with CTA, links, and meta, exposed by the scroll itself.
- [Fine Print Footer](https://cleverops.com.au/components/footers/footer-fine-print): A disclosure-first footer for regulated products, numbered fine-print notes set in readable React and Tailwind type, a licence line, quiet links, and a mono copyright rail.
- [Giant Type Footer](https://cleverops.com.au/components/footers/footer-giant-type): The footer as a signature, an oversized brand word rises from the page bottom as you arrive, above a quiet mono meta row. The last impression treated like the first.
- [Index Sheet Footer](https://cleverops.com.au/components/footers/footer-index-sheet): A footer set like a book's index, dense, beautifully-ordered link columns with mono folio numbers, a hairline frame, and a colophon line. For sites with real depth.
- [Masthead Footer](https://cleverops.com.au/components/footers/footer-masthead): A broadsheet masthead footer for React sites, nameplate between double rules, mono edition line, a real Tailwind newsletter form leading the sections, and a quiet legal rail.
- [Mega Directory Footer](https://cleverops.com.au/components/footers/footer-mega-directory): A directory footer for big sites, multi-column grouped links under a utility row with a search affordance and locale display, closed by a legal rail. Dense but ruled.
- [Minimal Rail Footer](https://cleverops.com.au/components/footers/footer-minimal-rail): One honest line, brand, three quiet links, and a mono copyright on a single hairline rail. The smallest footer that still looks drawn, entrance-only motion.
- [Signal Footer](https://cleverops.com.au/components/footers/footer-signal): A working footer, live status lamp, local time readout, newsletter field, and quiet links. The footer as an instrument panel that proves someone is home.
- [Funds Allocation Band](https://cleverops.com.au/components/nonprofit/funds-allocation-band): Where your dollar goes, a nonprofit transparency bar in React with seam-cut segments, a plain-language Tailwind ledger legend and an audited-statements footnote.
- [Generative Skeleton](https://cleverops.com.au/components/ai/generative-skeleton): A streaming placeholder that morphs, shimmering blocks resize and settle into real headings, rows, and cards as each section's content lands, so the answer arrives without a layout jump.
- [Gift Voucher Card](https://cleverops.com.au/components/beauty/gift-voucher-card): A voucher presented like the gift itself, certificate hairlines, a light serif denomination display, a from-someone-lovely line, and a purchase CTA. E-commerce in the beauty voice.
- [Gooey Type](https://cleverops.com.au/components/lab/gooey-type): SVG metaball letterforms for React, a threshold filter fuses heavy glyphs into one liquid membrane; pointer proximity snaps them apart and they re-fuse on release. Tailwind-themed, zero deps.
- [Grid Break](https://cleverops.com.au/components/lab/grid-break): A deconstructing editorial grid for React, scroll shears each cell off its seat along seeded vectors as the drafting skeleton surfaces, then reseats in reverse. Tailwind-themed, zero dependencies.
- [Guardrail Notice](https://cleverops.com.au/components/ai/guardrail-notice): An inline policy interjection, a quiet card explaining why the agent modified or declined an action, with an expandable mono policy reference; honest tone, destructive keyline only when blocked.
- [Guest Book Spread](https://cleverops.com.au/components/travel/guest-book-spread): Hotel guest reviews set like a guest book, one lead quote in large serif italic with stay details, smaller notes alongside. A React testimonial spread styled with Tailwind.
- [Gym Stats Board](https://cleverops.com.au/components/fitness/gym-stats-board): The gym's numbers board, members, classes a week, and PBs this month counting up in heavy tabular figures under bold condensed labels, with a plain-spoken honesty footnote.
- [Gentle Health FAQ](https://cleverops.com.au/components/health/health-faq-gentle): Patient FAQ in a reassuring register, honest plain-language answers to questions like will it hurt, real disclosure semantics over calm hairline rows, and an ask-us-directly phone fallback.
- [Aperture Hero](https://cleverops.com.au/components/heroes/hero-aperture): A camera iris of hairline blades opens once to reveal the hero, leaving a faint aperture ring behind the copy, an optical-instrument entrance for React and Tailwind sites.
- [Aurora Hero](https://cleverops.com.au/components/heroes/hero-aurora): Hero section with a drafting-grid backdrop, slow accent-tinted aurora, and a staggered editorial reveal. Left-aligned, themeable, reduced-motion safe.
- [Blueprint Hero](https://cleverops.com.au/components/heroes/hero-blueprint): Hero where the headline is annotated like a technical drawing, SVG dimension lines and mono measurement labels draw themselves around the display type.
- [Changelog Hero](https://cleverops.com.au/components/heroes/hero-changelog): What-shipped-this-week hero for dev tools, headline beside a live-feeling release feed panel of mono version tags and dated rows, one release highlighted. Momentum as the pitch.
- [Countdown Launch Hero](https://cleverops.com.au/components/heroes/hero-countdown-launch): Launch-window hero, a tabular countdown ticks toward the date under restrained display type, with a notify field as the single action. Anticipation without carnival.
- [Depth Field Hero](https://cleverops.com.au/components/heroes/hero-depth-field): A hero with true parallax depth, grid, contour, and content layers drift at different rates against the pointer, like looking into a drafting table through glass.
- [Eclipse Hero](https://cleverops.com.au/components/heroes/hero-eclipse): A graphite disk slides into alignment and the corona blooms, a totality entrance where the headline surfaces in eclipse light. React hero section themed by Tailwind tokens.
- [Editorial Index Hero](https://cleverops.com.au/components/heroes/hero-editorial-index): A magazine-cover hero, oversized masthead type beside a numbered index of destinations, each row a drawn hairline that extends on hover. Navigation as the artwork.
- [Frame Assembly Hero](https://cleverops.com.au/components/heroes/hero-frame-assembly): The blueprint sheet builds itself, corner ticks fly in, frame hairlines draw, the title block stamps, then content settles into the finished drawing. Construction as choreography, once.
- [Glassworks Hero](https://cleverops.com.au/components/heroes/hero-glassworks): A molten gather glows at the pipe, is shaped into the product panel, and anneals, primary heat decaying to graphite calm on a pyrometer countdown. A glassblowing entrance for React and Tailwind.
- [Glyph Storm Hero](https://cleverops.com.au/components/heroes/hero-glyph-storm): A storm of stray characters blows across the viewport and condenses into the headline, canvas dust becomes DOM type, then the wind dies completely.
- [Heliostat Hero](https://cleverops.com.au/components/heroes/hero-heliostat): A hairline mirror tilts on its mast and folds one beam of light onto the page, illuminating the copy as it arrives, a directed-light entrance for React and Tailwind heroes.
- [Ink Bloom Hero](https://cleverops.com.au/components/heroes/hero-ink-bloom): Ink blooms across the page on arrival, organic blots spread from seed points and the headline surfaces through them, like type developing on wet paper.
- [Intent Prompt Hero](https://cleverops.com.au/components/heroes/hero-intent-prompt): Hero built around a single prompt field, the placeholder cycles through real use-cases as ghost text, and the submit action is the page's one accent. Conversion by invitation.
- [Interlocking Hero](https://cleverops.com.au/components/heroes/hero-interlocking): A signal-box lever frame sets the route, points swing, the signal clears, one primary path lights, and content arrives in route order. A railway interlocking entrance for React and Tailwind.
- [Ledger Hero](https://cleverops.com.au/components/heroes/hero-ledger): Editorial hero over a live ledger strip, transaction rows tick in and reconcile beneath the headline, numbers settling one by one. The product working, as atmosphere.
- [Letterpress Hero](https://cleverops.com.au/components/heroes/hero-letterpress): A platen bar sweeps once and the headline stamps into the sheet with ink squash, sealed by a primary maker's chop, a letterpress entrance for React and Tailwind landing pages.
- [Lock Chamber Hero](https://cleverops.com.au/components/heroes/hero-lock-chamber): The hero rises like a vessel in a canal lock, gates seal, the chamber fills, and a token-primary waterline carries the content deck to the upper level. A hydraulic entrance for React and Tailwind.
- [Loft Lines Hero](https://cleverops.com.au/components/heroes/hero-loft-lines): Hull station curves draw flat on the sheet, then loft into a 3D wireframe with one primary waterline sweeping bow to stern, naval drafting as a hero entrance for React and Tailwind.
- [Manifesto Hero](https://cleverops.com.au/components/heroes/hero-manifesto): Long-form conviction hero, a multi-line manifesto set large, each line rising from its own mask, key phrases underlined in primary ink, one quiet CTA at the end. Belief before features.
- [Map Fold Hero](https://cleverops.com.au/components/heroes/hero-map-fold): The hero arrives as a folded field map opening in two moves, crease hairlines remaining as designed structure. A CSS 3D unfolding entrance for React and Tailwind landing pages.
- [Metric Wall Hero](https://cleverops.com.au/components/heroes/hero-metric-wall): Hero whose backdrop is a faint wall of the product's own numbers, a mono grid of stats at whisper alpha with one column resolving to full ink, the headline set over the evidence.
- [Orrery Hero](https://cleverops.com.au/components/heroes/hero-orrery): Planet armatures sweep their hairline rings at period-true rates into one dated conjunction, then park, a mechanical ephemeris entrance for React and Tailwind landing pages.
- [Portal Arrival Hero](https://cleverops.com.au/components/heroes/hero-portal-arrival): The page arrives through a portal, a small framed scene scales open to full bleed while headline layers fly past the camera. One cinematic entrance, then calm.
- [Product Frame Hero](https://cleverops.com.au/components/heroes/hero-product-frame): Split hero where the product shot is a drafted frame, a structural UI mock built from tokens that tilts gently toward the pointer, with floating annotation chips.
- [Projection Booth Hero](https://cleverops.com.au/components/heroes/hero-projection-booth): Film threads the projector, the ribbon snakes reel to reel through rollers and gate, the lamp swells, and a light cone installs the media panel as a held first frame. React and Tailwind tokens.
- [Question Hero](https://cleverops.com.au/components/heroes/hero-question): Conversion hero that opens with a question, two answer-path buttons preview their destinations in a mirrored panel below on hover or focus. The page begins by listening.
- [Signal Scan Hero](https://cleverops.com.au/components/heroes/hero-signal-scan): A scan band sweeps down the hero once, developing content in its wake as phosphor persistence, an instrument read-out entrance that decays to stillness and provably self-terminates.
- [Split Proof Hero](https://cleverops.com.au/components/heroes/hero-split-proof): Split hero with a vertical proof rail, stacked metric and quote cards slide in beside the headline and drift subtly on scroll. Evidence instead of an illustration.
- [Stage Rig Hero](https://cleverops.com.au/components/heroes/hero-stage-rig): A theatre fly system lowers the page into place, content flats descend on hairline lift lines as counterweights rise, and a cue lamp certifies GO. A rigged entrance for React and Tailwind.
- [Survey Sweep Hero](https://cleverops.com.au/components/heroes/hero-survey-sweep): A surveyor's sweep line rotates once around the hero's datum point, measuring content in as it passes, each element lands with a coordinate stamp, then the instrument goes quiet.
- [Terminal Hero](https://cleverops.com.au/components/heroes/hero-terminal): Split hero where a terminal card runs your product's happy path, typed command, streamed result rows, settled status line. Copy left, proof-of-work right.
- [Tide Lines Hero](https://cleverops.com.au/components/heroes/hero-tide-lines): Layered sine tide lines flow behind the headline like a gauge chart of the sea, one primary line breaks the pattern with a swell. A calm loop that genuinely stills off-viewport.
- [HITL Approval Card](https://cleverops.com.au/components/ai/hitl-approval-card): Human-in-the-loop approval for a pending agent action, plain-language summary, honest risk chip, expandable raw-payload mono block, and allow-once / always-allow / deny callbacks.
- [Hover Peek Link](https://cleverops.com.au/components/interactive/hover-peek-link): Inline link that floats a structural preview card on hover or focus, title, description, and meta from props, with intent delay, close grace, and viewport-edge flip.
- [Compare Frame](https://cleverops.com.au/components/interactive/image-compare-frame): Neutral labeled compare slider for any two children, a clipped divider with true keyboard slider semantics, framed like a plate in a technical catalog.
- [Impact Stat Band](https://cleverops.com.au/components/nonprofit/impact-stat-band): A nonprofit impact band in React, concrete figures like 1,240 meals counting up once in tabular numerals over warm sentence labels, closed by an audited source line. Tailwind-set.
- [Ink Dynamics](https://cleverops.com.au/components/lab/ink-dynamics): A real-time stable-fluids ink field for hero sections: the pointer stirs pigment that curls, swirls and slowly settles, token-inked over paper, with a designed still for reduced motion.
- [Instructor Panel](https://cleverops.com.au/components/education/instructor-panel): Educator bios that read like a good syllabus, plain-text credentials, an approachable register, and student-count tickers that prove the teaching miles without bragging.
- [Itinerary Day Flow](https://cleverops.com.au/components/travel/itinerary-day-flow): A day-by-day itinerary set like a travel journal, serif day headings, a hairline timeline of moments with mono times, and evocative one-line descriptions that smell of the place.
- [Keystroke Cascade](https://cleverops.com.au/components/interactive/keystroke-cascade): A type-anything React toy, every keystroke drops a physical glyph tile onto a canvas stage to bounce and stack; Enter opens the floor. Keyboard-native, Tailwind-tokened spectacle.
- [Kinetic Variable Hero](https://cleverops.com.au/components/lab/kinetic-variable-hero): A hero headline set on a live variable-font weight field, the pointer blooms wght through the glyphs while scroll scrubs a crest across the line. React + Tailwind, zero dependencies.
- [Latency Heartbeat](https://cleverops.com.au/components/ai/latency-heartbeat): A tiny inline streaming-health signal, an SVG heartbeat trace pulsing beside a mono millisecond readout, with an honest destructive shift past a threshold; parks flat when idle.
- [Learning Path Map](https://cleverops.com.au/components/education/learning-path-map): Courses drawn as one connected path, milestone nodes running from basics to specialization along a drawn spine, with a warm 'you are here' marker set by a prop.
- [Lens Lab](https://cleverops.com.au/components/interactive/lens-lab): A playable thin-lens ray lab for React, drag the object along the axis and principal rays, image, and magnification re-solve live. ARIA slider semantics, Tailwind token ink.
- [Liquid Metal](https://cleverops.com.au/components/lab/liquid-metal): A contained WebGL specimen cell (ogl) of raymarched liquid chrome: metaballs breathe and orbit, the pointer dents the surface, and the studio environment is derived live from theme tokens.
- [Blueprint Scan](https://cleverops.com.au/components/loaders/loader-blueprint-scan): A small drafting plate under survey, a hairline sweep crosses it while corner registration ticks resolve in its wake, holds, and rescans. The sweep carries the only primary ink. SVG and motion.
- [Diazo Develop](https://cleverops.com.au/components/loaders/loader-diazo-develop): A blueprint develops as data arrives, latent linework surfaces in ink-density order, no sweep, bound to a 0-100 progress prop. React SVG preloader on Tailwind tokens with live percent.
- [Film Leader](https://cleverops.com.au/components/loaders/loader-film-leader): Cinema countdown leader as a React preloader, crosshair plate, radial clock wipe, and a giant mono numeral bound to a 0-100 progress prop. Tailwind tokens, designed reduced-motion still.
- [Glyph Cycle](https://cleverops.com.au/components/loaders/loader-glyph-cycle): A single mono glyph slot rolls through a deterministic character set behind a mask, and when the done prop flips, it rolls once more onto a primary check and stops. A one-character machine.
- [Ink Dots](https://cleverops.com.au/components/loaders/loader-ink-dots): Three ink dots with a liquid squash-and-merge cadence, a scoped SVG goo filter fuses them as they meet, then they rebound apart. A working ellipsis, tiny and cheap. Pure CSS animation.
- [Kiln Cone](https://cleverops.com.au/components/loaders/loader-kiln-cone): Pyrometric cones slump as heat work accumulates, the firing cone's bend tracks a 0-100 progress prop until its tip touches at 100. React SVG preloader on Tailwind tokens, live percent.
- [Ledger Fill](https://cleverops.com.au/components/loaders/loader-ledger-fill): A mono working readout, "reconciling 047/128" with tabular digits rolling in a masked slot above a hairline progress rule. Determinate via a progress prop, or indeterminate by default.
- [Morse Pulse](https://cleverops.com.au/components/loaders/loader-morse-pulse): A short word transmitted in morse, dot and dash glyphs pulse in sequence on a telegraph cadence, with the word as a mono legend beneath. Playful, legible, sub-3Hz. Pure CSS, zero deps.
- [Observatory](https://cleverops.com.au/components/loaders/loader-observatory): An observatory acquires its target while data loads, dome slit, telescope slew and guiding reticle converge on a seeded star, locking at 100. React SVG preloader on Tailwind tokens.
- [Orbit Trio](https://cleverops.com.au/components/loaders/loader-orbit-trio): Three bodies orbit a common center at staggered phases, each towing a short decaying trail, a micro ephemeris as spinner. One body burns primary. Tiny SVG, pure CSS animation, zero deps.
- [Percent Ring](https://cleverops.com.au/components/loaders/loader-percent-ring): Determinate loading ring, hairline token track, primary arc, tabular mono percent at center and a micro-label beneath. Falls back to an orbiting indeterminate segment when no progress is given.
- [Plotter Trace](https://cleverops.com.au/components/loaders/loader-plotter-trace): A pen plotter drafts a seeded schematic while your React app loads, stroke length bound to a 0-100 progress prop, percent stamped in a live title block. Canvas preloader in Tailwind tokens.
- [Survey Draw](https://cleverops.com.au/components/loaders/loader-survey-draw): The brand as a spinner, a small blueprint frame with edge ticks and a corner registration cross that draws itself, holds, undraws, and redraws in a calm loop. SVG stroke work.
- [Swarm Count](https://cleverops.com.au/components/loaders/loader-swarm-count): Particle swarm preloader for React, thousands of ink specks continually re-form the live percent numeral as progress advances. Seeded, deterministic canvas themed by Tailwind tokens.
- [Titration](https://cleverops.com.au/components/loaders/loader-titration): A burette meters primary drops into the flask, the meniscus falls with a 0-100 progress prop until the indicator flips at the endpoint. React SVG preloader on Tailwind tokens, live percent.
- [Vault Dials](https://cleverops.com.au/components/loaders/loader-vault-dials): Concentric instrument dials rotate and lock as loading advances, each quarter seats a ring with a spring snap until the keyway aligns at 100. React and Tailwind spectacle preloader.
- [Loan Eligibility Steps](https://cleverops.com.au/components/finance/loan-eligibility-steps): Loan eligibility and application steps in React, plain criteria up front, numbered stages with document notes and honest preformatted timeframes in Tailwind. No approval hype.
- [Logic Gate Bench](https://cleverops.com.au/components/interactive/logic-gate-bench): A live logic schematic for React, flip real toggle switches and watch pulses race hairline traces through gates to the output lamp. aria-pressed switches, Tailwind tokens.
- [Logo Case Index](https://cleverops.com.au/components/logo-clouds/logo-case-index): React logo cloud as an index ledger, each Tailwind-styled wordmark row pairs a customer with a one-line outcome and a tabular metric, optionally case-linked.
- [Logo Departures Board](https://cleverops.com.au/components/logo-clouds/logo-departures-board): Split-flap React logo board, a fixed Tailwind grid of typographic wordmarks where one cell flips at a time in reading order, rotating more brands than cells.
- [Logo Marquee](https://cleverops.com.au/components/marquees/logo-marquee): Single-row logo strip on a pure-CSS loop, wordmarks sit grayscale and dimmed until hover restores them, with edge fade masks and an honest sr-only roster of company names.
- [Logo Proof Wall](https://cleverops.com.au/components/logo-clouds/logo-proof-wall): Static categorized logo wall, 'Backed by' and 'Works with' groups under mono labels and hairline rules, grayscale wordmarks with every company name in the accessibility tree.
- [Logo Prose Inline](https://cleverops.com.au/components/logo-clouds/logo-prose-inline): React social-proof paragraph with customer wordmarks set inline in the sentence, a Tailwind typographic lockup where every brand is real, readable text.
- [Logo Sector Filter](https://cleverops.com.au/components/logo-clouds/logo-sector-filter): Interactive React logo wall with sector filter chips, picking an industry spotlights matching Tailwind wordmarks in place while the rest recede, never reflowing.
- [Logo Stat Strip](https://cleverops.com.au/components/logo-clouds/logo-stat-strip): One hairline instrument band interleaving grayscale wordmarks with two counting proof stats, logos as the nouns, tabular numerals as the numbers, seam-divided.
- [Lumen Cast](https://cleverops.com.au/components/lab/lumen-cast): A cursor-driven lamp over a feature grid. Canvas 2D casts soft real-time shadows from every tile, near tiles lift toward the light, and keyboard focus steers the lamp for equal access.
- [Magnetic Field](https://cleverops.com.au/components/lab/magnetic-field): A multi-body magnetic link field for React, the pointer pulls chips, displaced bodies shoulder neighbours aside, springs carry the system home. Keyboard drives the same physics. Tailwind-themed.
- [Focus Lens Marquee](https://cleverops.com.au/components/marquees/marquee-focus-lens): React marquee with a fixed center reading lens, Tailwind display phrases drift on a loop and swell into focus as they cross a hairline reticle, receding at the edges.
- [Split Lanes Marquee](https://cleverops.com.au/components/marquees/marquee-split-lanes): Two counter-scrolling lanes of short display words, filled type above, outline type below, pure CSS with edge fades and a static stacked lockup under reduced motion.
- [Step Rail Marquee](https://cleverops.com.au/components/marquees/marquee-step-rail): Stepped React marquee that advances one seamed cell at a time and dwells so every entry is readable, a pure CSS Tailwind rail with generated hold keyframes.
- [Ticker Tape Marquee](https://cleverops.com.au/components/marquees/marquee-ticker-tape): Thin financial-style tape scrolling mono label-value pairs on pure CSS, signed deltas carry direction glyphs in the primary/destructive token pair, framed by hairlines.
- [Velocity Scroll Marquee](https://cleverops.com.au/components/marquees/marquee-velocity-scroll): Display-type marquee whose speed and direction follow scroll velocity, spring-smoothed so it drifts gently at rest, whips with fast scrolls, and never jumps.
- [Mask Wipe Kit](https://cleverops.com.au/components/lab/mask-wipe-kit): A two-panel wipe stage for React, iris, blinds, split, or sweep mask geometry scrubbed by scroll or a progress prop, a primary keyline on the wipe front. Tailwind-themed, reduced-motion honest.
- [Matter Process Steps](https://cleverops.com.au/components/legal/matter-process-steps): How a legal matter proceeds, numbered serif stages with plain-English descriptions and quiet timeframe figures. A near-still React process block styled with Tailwind.
- [Membership Glow](https://cleverops.com.au/components/beauty/membership-glow): Beauty memberships with serif tier names like The Monthly Ritual, included treatments as airy lists, per-month prices in tabular figures, and a soft masked halo behind the signature tier.
- [Membership Tiers](https://cleverops.com.au/components/fitness/membership-tiers): Gym pricing in the coach's voice, bold uppercase tier names like FOUNDATION and SURGE, per-week prices in big tabular figures, commitment notes, and a ruled ledger with zero glow.
- [Memory Ledger](https://cleverops.com.au/components/ai/memory-ledger): What the agent remembers, as ruled ledger rows, stored facts with source chips, mono added-at stamps, per-row forget buttons, and one pinned fact held on a primary keyline.
- [Message Action Bar](https://cleverops.com.au/components/ai/message-action-bar): Assistant message action toolbar for React chat UIs, copy, retry, edit, and feedback buttons with a mono model attribution seam; Tailwind-styled, roving tabindex, SDK-agnostic.
- [Model Lineup Rail](https://cleverops.com.au/components/automotive/model-lineup-rail): A scroll-snap model range rail for React dealer sites, per-body-style stroke silhouettes instead of photos, mono from-pricing, keyboard-scrollable region semantics, Tailwind tokens.
- [Model Picker Row](https://cleverops.com.au/components/ai/model-picker-row): A segmented row of model options, name over quiet mono context, speed, and cost data, with a spring-loaded sliding thumb marking the selection; display plus callback only.
- [Bottom Tabs Navbar](https://cleverops.com.au/components/navbars/navbar-bottom-tabs): App-style React navigation, a thumb-reach bottom tab bar with a raised primary action on mobile that becomes a top Tailwind glass bar on desktop; one landmark, safe-area aware.
- [Breadcrumb Morph Navbar](https://cleverops.com.au/components/navbars/navbar-breadcrumb-morph): An app navbar that morphs between top-level links and a breadcrumb trail as a depth prop changes, the active link travels into crumb position with layoutId continuity.
- [Command Center Navbar](https://cleverops.com.au/components/navbars/navbar-command-center): A navbar whose centerpiece is a Cmd-K search button opening a compact command sheet, grouped destinations, arrow-key selection, quiet links flanking a keyboard-first affordance.
- [Flow Steps Navbar](https://cleverops.com.au/components/navbars/navbar-flow-steps): Checkout-flow navbar for React, a numbered step trail with aria-current and honest revisit links, condensing to a mono counter and Tailwind hairline progress fill on mobile.
- [Glass Navbar](https://cleverops.com.au/components/navbars/navbar-glass): Header that starts as pure structure over the hero and condenses into glass on scroll, blur, hairline seam, tighter height. Accessible staggered mobile menu with Escape handling.
- [Mega Panel Navbar](https://cleverops.com.au/components/navbars/navbar-mega-panel): Navbar whose product menu opens a three-zone mega panel, primary destinations with descriptions, a quiet secondary column, and a featured card. Real IA, not a link dump.
- [Pill Dock Navbar](https://cleverops.com.au/components/navbars/navbar-pill-dock): A floating pill nav that hangs centered under the top edge, the active link carries a sliding thumb, and the whole dock condenses on scroll. App-like, not corporate.
- [Progress Spine Navbar](https://cleverops.com.au/components/navbars/navbar-progress-spine): A reading navbar for long pages, a hairline progress spine under the bar fills as you scroll, section labels light up as you pass them, and the bar keeps out of the way.
- [Sidebar Hybrid Navbar](https://cleverops.com.au/components/navbars/navbar-sidebar-hybrid): Docs-style responsive navigation, a glass top bar with a drawer on mobile becomes a left rail of grouped sections with an active keyline on lg. Skip link built in.
- [Split Veil Navbar](https://cleverops.com.au/components/navbars/navbar-split-veil): Centered-brand navbar with split links, whose menu button draws a full-screen veil, oversized destinations stagger in over a dimmed page, agency-style.
- [Status Banner Navbar](https://cleverops.com.au/components/navbars/navbar-status-banner): A navbar with an integrated status lane under its hairline seam, one line, a link and a dismiss; dismissing collapses the lane smoothly while the header holds steady.
- [Tab Rail Navbar](https://cleverops.com.au/components/navbars/navbar-tab-rail): Two-deck React navbar, primary sections over a persistent contextual sub-link rail with a sliding Tailwind underline; the mobile rail scrolls its own overflow with edge fades.
- [Before Your First Visit](https://cleverops.com.au/components/health/new-patient-checklist): First-visit checklist for new patients, what to bring and what to do beforehand in two calm columns, with an arrive-early aside. Plain-language React and Tailwind onboarding for clinics.
- [Number Milestone Row](https://cleverops.com.au/components/numbers/number-milestone-row): A row of milestone numbers between hairline separators, each figure lands in sequence with a spring settle, and a primary tick draws itself under the final one.
- [Number Odometer](https://cleverops.com.au/components/numbers/number-odometer): Multi-digit odometer where every digit rolls inside its own masked column, settling right to left like a meter, with prefix, suffix, and decimal support.
- [Number Radial Gauge](https://cleverops.com.au/components/numbers/number-radial-gauge): Determinate SVG radial gauge, a hairline token track, one primary arc drawn via pathLength, a tabular counted value at center and a mono label beneath.
- [Number Segment Meter](https://cleverops.com.au/components/numbers/number-segment-meter): Discrete React meter primitive, value-of-max rendered as Tailwind-token unit cells that fill in stepped sequence, with a mono fraction readout and threshold tick.
- [Number Ticker](https://cleverops.com.au/components/numbers/number-ticker): Counts to a value once in view with an expo-out feel, fast start, precise landing. Locale-aware formatting, prefix and suffix, tabular numerals against layout shift.
- [Off-Market Teaser](https://cleverops.com.au/components/real-estate/off-market-teaser): A coming-soon listing teaser in React, suburb leads while the address stays withheld behind a redaction bar, with a launch date line and a register-interest CTA. Tailwind tokens.
- [Open Home Schedule](https://cleverops.com.au/components/real-estate/open-home-schedule): A week of inspections set like a printed schedule, days as ruled groups, each open home with its address, a tabular time range, and an add-to-calendar affordance via callback.
- [Order Tracking Steps](https://cleverops.com.au/components/ecommerce/order-tracking-steps): Order fulfillment status steps for React storefronts, completed, current and upcoming grammar with aria-current, mono carrier timestamps, and an honest Tailwind-set ETA line.
- [Orrery Crank](https://cleverops.com.au/components/interactive/orrery-crank): A hand-cranked orrery for React, turn the crank and geared planets advance at true period ratios while you hunt conjunctions on a mono day readout. ARIA slider, Tailwind tokens.
- [Pantograph Copier](https://cleverops.com.au/components/interactive/pantograph-copier): A working pantograph for React, trace in the source plate and a four-bar linkage redraws your stroke at scale in primary ink. Keyboard steerable, touch native, Tailwind tokens.
- [Patient Info Bar](https://cleverops.com.au/components/health/patient-info-bar): The practical strip patients actually need, bulk-billing badge, accessibility notes, parking, and the after-hours line, set with the same care most sites reserve for heroes.
- [Performance Gauge Cluster](https://cleverops.com.au/components/automotive/performance-gauge-cluster): An instrument-cluster stats row for React, 240-degree dial arcs sweep once to data-true values, preformatted kW, Nm and 0-100 figures in Tailwind mono, one featured dial accent.
- [Physics Type](https://cleverops.com.au/components/lab/physics-type): Cursor-repelled headline physics for React, every glyph is a body on a damped home spring fleeing an inverse-falloff pointer field; keyboard focus fires a designed ripple. Tailwind-themed.
- [Plain Language Glossary](https://cleverops.com.au/components/legal/plain-language-glossary): Legal terms translated, serif terms with always-visible plain-English glosses and measured disclosure rows for the full explanation. An accessible React glossary in Tailwind.
- [PR Leaderboard](https://cleverops.com.au/components/fitness/pr-leaderboard): The gym's record board in React, ranked lifters with heavy tabular kilograms, NEW flags on fresh PRs, a coach-verified footnote, and Tailwind contrast that reads across the room.
- [Practice Areas Grid](https://cleverops.com.au/components/legal/practice-areas-grid): Practice areas as formal hairline tiles, serif area names, one-sentence plain-English scope lines, and matter counts in quiet tabular figures. Measured, precise, badge-free.
- [Practitioner Directory](https://cleverops.com.au/components/health/practitioner-directory): Clinician cards with real credential lines, special-interest tags, and a next-available chip, the calm, plain-language way patients choose who to see.
- [Press Accolades Band](https://cleverops.com.au/components/restaurants/press-accolades-band): Restaurant press and awards band for React, accolades as serif text mastheads with mono years and one critic quote. Tailwind tokens, zero logo assets.
- [Prev Next Articles](https://cleverops.com.au/components/blog/prev-next-articles): End-of-article pagination, two hairline panels with mono direction labels and display titles, hairlines extending on hover. A lone neighbour panel spans the full width.
- [Add-on Builder Pricing](https://cleverops.com.au/components/pricing/pricing-addon-builder): Configurable React pricing, a base plan plus real checkbox add-ons, an itemized ledger that re-rules itself as items land, and a rolling tabular total. No dark patterns.
- [Pricing Compare Matrix](https://cleverops.com.au/components/pricing/pricing-compare-matrix): Feature-by-plan pricing matrix on real table semantics, a sticky plan header row with prices and CTAs, check, dash and mono cell values, and a single keyline marking the featured plan column.
- [Ledger Quote Pricing](https://cleverops.com.au/components/pricing/pricing-ledger-quote): Agency pricing set as a quote document, ruled line items with tabular mono prices, subtotal, GST and total ledger rows, and a mono valid-until note. Pricing as paperwork, not cards.
- [Plan Rows Pricing](https://cleverops.com.au/components/pricing/pricing-plan-rows): SaaS pricing as a ruled rate sheet in React and Tailwind, one hairline row per plan with inline feature inventory, mono tabular prices, and a keyline on the featured plan.
- [Single Plan Pricing](https://cleverops.com.au/components/pricing/pricing-single-focus): One-plan pricing stated with confidence, the price set as the hero figure, included features in two ruled columns, and quiet FAQ links. For products with one honest price and nothing to upsell.
- [Usage Pricing Slider](https://cleverops.com.au/components/pricing/pricing-slider-usage): Usage-based pricing with an honest slider, an arrow-key accessible role=slider sets seats or volume, the price recalculates with rolling digits, and breakpoints are labelled in mono under the track.
- [Glow Pricing Tiers](https://cleverops.com.au/components/pricing/pricing-tiers-glow): Three quiet tiers with one accent moment, the featured plan carries a primary hairline and soft glow. Billing toggle with sprung thumb; prices crossfade on flip.
- [Transparent Pricing Breakdown](https://cleverops.com.au/components/pricing/pricing-transparent-breakdown): A where-your-money-goes pricing block for React, a proportional ink bar with one primary share, a ruled legend of preformatted amounts, and Tailwind hairline restraint.
- [Trial Timeline Pricing](https://cleverops.com.au/components/pricing/pricing-trial-timeline): Honest trial pricing for React, a dated timeline of what actually happens: full access today, a reminder email before any charge, then the real price on a Tailwind hairline rail.
- [Private Dining Inquiry](https://cleverops.com.au/components/restaurants/private-dining-inquiry): An events block that sells the back room in serif, capacity and minimum spend as quiet data rows, and a three-field inquiry form with visible labels. Warm, unhurried, no SaaS urgency.
- [Product Tile](https://cleverops.com.au/components/ecommerce/product-tile): The product card perfected, structural product panel, honest sale typography with a struck was-price and quiet unit price, aria-labelled swatch dots, and one accent on the add action.
- [Program Block Card](https://cleverops.com.au/components/fitness/program-block-card): A training-program card in the coach's voice, phase name in bold condensed caps, weeks and sessions per week as mono data, an outcome promise line, and five difficulty dots.
- [Program Compare Table](https://cleverops.com.au/components/fitness/program-compare-table): Training programs compared like a coach would, bold uppercase columns over ruled attribute rows, sessions per week in mono data, one badge pick. A React and Tailwind block.
- [Project Showcase Grid](https://cleverops.com.au/components/education/project-showcase-grid): Student work in a celebration grid, project titles, one-line briefs, tools chips, and a mono cohort tag over structural placeholder panels. Proof that students actually ship.
- [Prompt Composer](https://cleverops.com.au/components/ai/prompt-composer): The agent input surface done right, auto-growing textarea, attachment chips, a slash-command hint row, and a model-plus-cost strip on the bottom seam; fully controlled, submits on cmd-enter.
- [Property Compare Table](https://cleverops.com.au/components/real-estate/property-compare-table): Shortlisted homes side by side in React, addresses head the columns, prices in large tabular figures, ruled attribute rows with em-dash gaps, Tailwind tokens throughout.
- [Property Feature Sheet](https://cleverops.com.au/components/real-estate/property-feature-sheet): The listing's spec sheet set like a printed document, land and floor areas, orientation, and zoning in ruled two-column rows beside a structural floorplan placeholder panel.
- [Listing Gallery Strip](https://cleverops.com.au/components/real-estate/property-gallery-strip): A horizontal snap-scroll rail of listing cards with hairline edge fades and a keyboard-focusable scroll region, how a boutique agency presents this week's properties.
- [Property Listing Card](https://cleverops.com.au/components/real-estate/property-listing-card): The listing card done right, status ribbon over a structural image panel, price in large tabular figures, a beds-baths-cars icon row, and the address doing the talking as the heading.
- [Pull Quote Break](https://cleverops.com.au/components/blog/pull-quote-break): An in-article pause, an oversized pull quote set against a primary quote-bar keyline, attribution in mono, and generous whitespace on both sides. Typography does all the work.
- [Quiet Hours](https://cleverops.com.au/components/beauty/quiet-hours-panel): Sensory-friendly quiet hours, weekly low-stimulation session times beside a gentle list of what changes, from dimmed lights to no dryers. A React and Tailwind panel for salons.
- [Ransom Type](https://cleverops.com.au/components/lab/ransom-type): A ransom-note headline for React, every letter is cut from a different publication with seeded serif/mono/inverted chip treatments and a staggered paste-down entrance. Tailwind tokens, AA per chip.
- [Rate Comparison Sheet](https://cleverops.com.au/components/finance/rate-comparison-sheet): Home loan rate comparison rows in React, advertised and comparison rates paired in tabular numerals with the statutory warning as first-class Tailwind copy. Disclosure-forward, zero urgency.
- [Reasoning Disclosure](https://cleverops.com.au/components/ai/reasoning-disclosure): A model thinking block, collapsed to a shimmering summary line while streaming, expanding to the full reasoning text with a mono character count; settles quiet when done.
- [Refraction Pane](https://cleverops.com.au/components/lab/refraction-pane): A floating glass pane (ogl) that refracts a token-inked drafting plate: lens distortion, chromatic split and a primary fresnel rim. Ambient drift, spring drag-return, keyboard operable.
- [Representative Matters List](https://cleverops.com.au/components/legal/representative-matters-list): Anonymized representative matters in bound-casebook serif, practice-area labels, quiet outcomes and years, and a consent disclaimer. A React proof list styled with Tailwind.
- [Ambience Mosaic](https://cleverops.com.au/components/restaurants/restaurant-gallery-mosaic): A room-first gallery mosaic built entirely from structural placeholder panels, varied warm muted token tones under a shared grain, each with a serif caption. Space, not food, no images.
- [Hours & Status Strip](https://cleverops.com.au/components/restaurants/restaurant-hours): Opening hours as a clean mono table with a live open-now lamp, today's row highlighted, next opening surfaced when closed. Print-schedule clarity, zero deps beyond motion.
- [Editorial Menu](https://cleverops.com.au/components/restaurants/restaurant-menu): A restaurant menu set like a fine editorial page, courses with dotted price leaders, dish notes in quiet ink, and dietary marks in mono. Print-menu craft for the web.
- [Reservation Bar](https://cleverops.com.au/components/restaurants/restaurant-reservation-cta): A booking strip that makes reserving feel effortless, party-size and time pills, one golden action, and a phone fallback. Designed to sit under a restaurant hero.
- [Specials Board](https://cleverops.com.au/components/restaurants/restaurant-specials): Chef's specials as a chalkboard-turned-editorial grid, hairline tiles with course labels, dish stories, prices, and one tonight-only tile carrying the accent.
- [Getting Your Results](https://cleverops.com.au/components/health/results-turnaround-panel): What happens after your test, turnaround windows per result type, how the clinic contacts you, and an every-result-is-followed-up promise. A calm React and Tailwind panel for clinics.
- [Review Summary Panel](https://cleverops.com.au/components/ecommerce/review-summary-panel): A React reviews summary, average rating hero numeral, data-true star histogram bars in Tailwind hairlines, token-neutral stars with no gold clutter, and one verified highlight quote.
- [Ritual Steps](https://cleverops.com.au/components/beauty/ritual-steps): A signature treatment unfolded as a numbered ritual, large serif numerals, italic sensory step descriptions, and durations in quiet mono. The sequence reads like a printed ceremony card.
- [Room & Suite Card](https://cleverops.com.au/components/travel/room-suite-card): A hotel room card in serif calm, framed view placeholder, quiet amenity icons, the from-rate in tabular figures with per-night whispered, and a single reserved booking accent.
- [Rotary Tuner](https://cleverops.com.au/components/interactive/rotary-tuner): A draggable rotary tuner for React, real angular drag with inertia and detents drives a geared needle while station labels resolve from static. ARIA slider semantics, Tailwind tokens.
- [Run Cost Ticker](https://cleverops.com.au/components/ai/run-cost-ticker): Live run-cost readout, tabular currency with rolling digits, per-model breakdown rows, and a session total that settles with a single spring when the run ends.
- [Certification Wall](https://cleverops.com.au/components/beauty/salon-certification-wall): Training diplomas and brand accreditations framed like certificates on a salon wall, double-hairline frames, serif academy names, holder and year lines. React and Tailwind trust.
- [Salon Price List](https://cleverops.com.au/components/beauty/salon-price-list): A full salon price list set like a printed tariff document, serif category heads, whisper hairline rows of service, duration and price, and junior/senior stylist columns in tabular figures.
- [The Salon Shelf](https://cleverops.com.au/components/beauty/salon-product-shelf): The salon's retail shelf as a designed object, framed product placeholders resting on a drawn hairline shelf, italic why-we-stock-it lines, quiet prices. A React and Tailwind block.
- [Chapter Snap](https://cleverops.com.au/components/scroll/scroll-chapter-snap): Full-viewport chapters with CSS proximity scroll-snap, never a mandatory trap, and a side rail of dots with mono numerals that tracks the active chapter through honest anchor links.
- [Core Sample](https://cleverops.com.au/components/scroll/scroll-core-sample): Scroll drills a core sample through labeled strata, the bit sinks, the extraction tube fills layer by layer, and a depth log counts to the primary seam. React and Tailwind tokens, no assets.
- [Depth Fade](https://cleverops.com.au/components/scroll/scroll-depth-fade): A long-form wrapper where blocks you have read past gently recede in opacity and scale, keeping the active block crisp, reading focus as depth, clamped so text never goes illegible.
- [Scroll Director](https://cleverops.com.au/components/lab/scroll-director): A pinned narrative stage for React, scroll scrubs through choreographed beats on a sticky frame with a cue rail and running timecode, fully reversible and never scroll-jacked. Tailwind-themed.
- [Exploded View](https://cleverops.com.au/components/scroll/scroll-exploded-view): A pinned exploded-view scene for React, scroll separates a token-built 3D assembly into labeled plates with hairline leader lines, zero image assets. Native scroll, Tailwind-themed, poster-safe.
- [Gearworks](https://cleverops.com.au/components/scroll/scroll-gearworks): Scroll cranks a meshed SVG gear train, exact tooth ratios counter-rotate hairline gears until the primary dial needle lands on your stat. React and Tailwind tokens, native scroll scrub, no assets.
- [Horizontal Gallery](https://cleverops.com.au/components/scroll/scroll-horizontal-gallery): A vertical-scroll-driven horizontal track inside a sticky clipped viewport, translateX mapped to section progress, focusable cards, and a plain scrollable rail under reduced motion.
- [Image Sequence Lite](https://cleverops.com.au/components/scroll/scroll-image-sequence-lite): The Apple scroll-scrub technique without image assets, a token-built SVG diagram assembles across 24 deterministic frames as the section scrolls, every frame a designed still.
- [Ink Roller](https://cleverops.com.au/components/scroll/scroll-ink-roller): A viewport press line inks the page as content scrolls beneath it, blocks rise as blueprint proofs and cross into full ink via clip-path. React and Tailwind tokens; reversible, native scroll only.
- [Parallax Strata](https://cleverops.com.au/components/scroll/scroll-parallax-strata): Three drafting-table strata, hairline grid, survey contours, content, drift at gently different rates as the section scrolls, depth measured in single-digit percentages.
- [Progress Thread](https://cleverops.com.au/components/scroll/scroll-progress-thread): An article wrapper that draws a hairline thread down the content's left edge, filling with primary as you read and ticking a milestone dot at every h2, a reading instrument.
- [Reveal Group](https://cleverops.com.au/components/scroll/scroll-reveal-group): A choreography wrapper that gives arbitrary children the library's signature staggered entrance, direction, distance and stagger as props, revealed once and never replayed.
- [Scroll Sequence Kit](https://cleverops.com.au/components/lab/scroll-sequence-kit): An honest scrubbed frame sequence for React, canvas plays a deterministic procedural wireframe, or consumer frame URLs through a decode-ahead pipeline, driven by native scroll. Tailwind-themed.
- [Sticky Scenes](https://cleverops.com.au/components/scroll/scroll-sticky-scenes): A pinned stage where token-built scene panels crossfade as narrative sections scroll past beside it, sticky storytelling at a walking pace, native scroll throughout.
- [Sundial](https://cleverops.com.au/components/scroll/scroll-sundial): Scroll runs the sun across a drafted sundial, the shadow wedge sweeps hour ticks, pinning content to times of day until the marked hour lights. React and Tailwind tokens, native scroll.
- [Suspension Span](https://cleverops.com.au/components/scroll/scroll-suspension-span): Scroll builds a suspension bridge from dashed survey plan to open span, towers rise, catenary cables draw, hangers drop, the deck crosses. React and Tailwind tokens, fully reversible.
- [Type Tunnel](https://cleverops.com.au/components/scroll/scroll-type-tunnel): A scroll-scrubbed typographic dolly for React, the camera dives through stacked word planes and drafting frames to land on the destination headline. Tailwind tokens, native scroll, poster-safe.
- [Wind Tunnel](https://cleverops.com.au/components/scroll/scroll-wind-tunnel): Scroll pitches an airfoil in a drafted wind tunnel, hairline streamlines re-solve around the body until the lift vector peaks on your stat. React and Tailwind tokens, native scroll scrub.
- [Selected Work Index](https://cleverops.com.au/components/agency/selected-work-index): A selected-work index for agency and studio sites, oversized project titles on hairline rows, each carrying sector, year and a preformatted result metric. React and Tailwind.
- [Selling Process Timeline](https://cleverops.com.au/components/real-estate/selling-process-timeline): The vendor's road to sold, appraisal to settlement as numbered ruled steps with week ranges in tabular figures and one auction-day milestone. A React and Tailwind block.
- [Service Booking Strip](https://cleverops.com.au/components/automotive/service-booking-strip): A workshop booking bar that gets straight to work, logbook, brakes and tyres service pills, a preformatted earliest-slot chip in mono, a tap-to-call fallback, and one book-it-in action.
- [Service History Timeline](https://cleverops.com.au/components/automotive/service-history-timeline): A React service logbook timeline for workshops and dealers, dated entries with mono odometer stamps, itemised work lines, honest totals, and a next-due marker in Tailwind tokens.
- [Session Timeline Scrub](https://cleverops.com.au/components/ai/session-timeline-scrub): A horizontal session scrubber, turn markers on a hairline rail with drag and arrow-key navigation under role=slider semantics, and a preview chip summarizing the focused turn.
- [Shader Image](https://cleverops.com.au/components/lab/shader-image): A WebGL image surface (ogl) for React, ripple, pixelate, or sway displacement on hover, a token-drawn plate by default, and honest fallbacks to a plain image. Tailwind-themed, self-idling.
- [Shipping Promise Strip](https://cleverops.com.au/components/ecommerce/shipping-promise-strip): The conversion trust strip without the carnival, a preformatted delivery estimate, a data-true free-shipping progress hairline as the single accent, and a quiet returns note.
- [Shutter Timing Bench](https://cleverops.com.au/components/interactive/shutter-timing-bench): A focal-plane shutter bench for React, pick a speed, fire at a moving target and every plate keeps honest motion smear on a contact sheet. Tailwind tokens, keyboard native.
- [Size & Fit Bar](https://cleverops.com.au/components/ecommerce/size-fit-bar): A size selector row with radiogroup keyboard semantics, honest stock states where sold-out sizes stay visible but disabled, a quiet true-to-size fit note, and a size-guide link.
- [Slash Command Menu](https://cleverops.com.au/components/ai/slash-command-menu): Anchored slash-command menu for React chat composers, query-prop filtering, grouped commands with argument hints, and listbox semantics for any host input; Tailwind-styled, portal-free.
- [Slide Rule](https://cleverops.com.au/components/interactive/slide-rule): A working slide rule for React, drag the slide and the glass runner across true log scales and read the product off the hairline. Two real ARIA sliders, Tailwind token ink.
- [Slingshot Plotter](https://cleverops.com.au/components/interactive/slingshot-plotter): A slingshot ballistics range for React, drag to aim with a live predicted arc, fire, and every shot etches its trajectory with plotted coordinates. Keyboard aimable, Tailwind tokens.
- [Speaker Spotlight Row](https://cleverops.com.au/components/events/speaker-spotlight-row): Headline speakers as poster rows, names set huge, talk titles in italic, companies in mono, and a day-stage chip per row. The speaker bill is the artwork.
- [Spec Comparison Table](https://cleverops.com.au/components/automotive/spec-comparison-table): A two-to-three column vehicle spec table set with drafting precision, mono tabular figures, a per-row winner tick as the single accent, a sticky header row, and real table semantics.
- [Specimen Orb](https://cleverops.com.au/components/lab/specimen-orb): A contained WebGL specimen viewer: a gyroid TPMS lattice raymarched inside a glass orb, refracting the token bench with a primary glint. Slow ambient orbit, eased drag momentum, arrow keys rotate.
- [Sponsor Tier Wall](https://cleverops.com.au/components/events/sponsor-tier-wall): Sponsors ranked the way posters rank them, headline wordmarks set huge, partners mid, community small, grouped under mono tier labels on hairline rules. No logo files needed.
- [Stat Delta Chip](https://cleverops.com.au/components/numbers/stat-delta-chip): Compact metric chip pairing a counted-up value with a signed delta pill, direction glyph and token-honest color, primary for gains, destructive for losses.
- [Stats Activity Grid](https://cleverops.com.au/components/stats/stats-activity-grid): Contribution-style React activity heatmap, a dependency-free Tailwind grid of cells stepped through primary opacities, with mono axis labels and an honest text summary.
- [Stats Band](https://cleverops.com.au/components/stats/stats-band): Full-width hairline band of three to five counting stats, tabular numerals tick up once on view over mono micro-labels, separated by vertical hairline seams.
- [Stats Bar List](https://cleverops.com.au/components/stats/stats-bar-list): Ranked React stats ledger, each row pairs a mono index and preformatted value with a 2px Tailwind-token bar drawn to scale, the leading row carrying the accent.
- [Stats Compare](https://cleverops.com.au/components/stats/stats-compare): Before-and-after metrics in two hairline columns, each row pairs the old number with the new one and settles a delta chip that quantifies the improvement.
- [Stats Composition Bar](https://cleverops.com.au/components/stats/stats-composition-bar): Part-to-whole React stat band, one Tailwind-token stacked bar splits into hairline-seamed segments with a legend ledger of preformatted shares beneath it.
- [Live Board Stats](https://cleverops.com.au/components/stats/stats-live-board): Instrument-panel grid of stat tiles, counting numerals over mono labels, with one tile carrying a tiny inline SVG sparkline drawn from deterministic prop data.
- [Stats Prose Inline](https://cleverops.com.au/components/stats/stats-prose-inline): Editorial React stats paragraph, preformatted figures set inline in one flowing Tailwind sentence, with superscript footnote markers tied to a mono sources ledger.
- [Stats Story](https://cleverops.com.au/components/stats/stats-story): One hero stat set enormous with a sentence that gives it meaning, while secondary metrics wait quietly below a hairline, an editorial argument, not a dashboard.
- [Flow Stepper](https://cleverops.com.au/components/interactive/stepper-flow): Controlled multi-step progress stepper, numbered nodes on a hairline spine, completed ticks that draw in, a current node that pulses exactly once, and real links when steps navigate.
- [Sticky Grid Unfold](https://cleverops.com.au/components/lab/sticky-grid-unfold): A pinned React deck that unfolds into a ruled grid on scroll, cards travel from a neat pile to their seats as outlines and skeleton lines draw in, fully reversible. Seeded, Tailwind-themed.
- [String Pluck Field](https://cleverops.com.au/components/interactive/string-pluck-field): A playable field of hairline strings for React, they bend around the pointer and ring with damped harmonic decay when plucked by cursor, tap, or keyboard. Tailwind token strokes.
- [Student Outcomes Band](https://cleverops.com.au/components/education/student-outcomes-band): Outcome stats in the encouraging register, completion rate, career switches, and salary delta tick up once, each with a plain-language caption instead of a mono label.
- [Studio Process Reveal](https://cleverops.com.au/components/agency/studio-process-reveal): A studio process rail, oversized phase numerals reveal along a drawn hairline with a duration and deliverable per phase. An editorial React and Tailwind block where motion is the pitch.
- [Study Mode Compare](https://cleverops.com.au/components/education/study-mode-compare): Online, on-campus, and hybrid study modes compared dimension by dimension, with a same-certificate reassurance line. A React and Tailwind comparison block for education sites.
- [Stylist Gallery](https://cleverops.com.au/components/beauty/stylist-gallery): Salon team cards with airy spacing, tall portrait frames, serif names, specialties in soft italic, and a hover lift so delicate it reads as a breath. A lookbook, not a staff grid.
- [Sub-Agent Tree](https://cleverops.com.au/components/ai/sub-agent-tree): Nested agent delegation as an expandable tree, hairline connectors, per-node status lamps and mono duration chips, for orchestrator runs that fan out past a single level.
- [Suburb Report Card](https://cleverops.com.au/components/real-estate/suburb-report-card): A suburb market snapshot, median price counting up in big tabular figures, a 12-month delta chip, ruled days-on-market and clearance rows, and a mono data-as-of provenance note.
- [SVG Mask Chapters](https://cleverops.com.au/components/lab/svg-mask-chapters): Chapters revealed through drawn SVG mask shapes for React, a circle, keyhole arch, and diagonal band draw and fill as scroll scrubs a pinned stage. Tailwind tokens, reversible, reduced-motion safe.
- [Physics Underline Tabs](https://cleverops.com.au/components/interactive/tabs-underline-physics): The classic underline tabs with real physics, the active bar travels on an underdamped spring with velocity-linked squash and one visible overshoot, over correct APG tablist semantics.
- [Tasting Menu](https://cleverops.com.au/components/restaurants/tasting-menu): Seasonal tasting menu React block, a centered serif course procession with one per-head price and wine pairing in mono. Tailwind tokens, degustation calm.
- [Team Cohort Timeline](https://cleverops.com.au/components/team/team-cohort-timeline): React team timeline grouping members into year-joined cohorts along a hairline spine, mono year markers and Tailwind-ruled rows tell the growth story.
- [Team Coverage Matrix](https://cleverops.com.au/components/team/team-coverage-matrix): Accessible React team matrix mapping people to focus areas, real table semantics and a Tailwind hairline grid, with ink marks showing who covers and leads what.
- [Team Directory Rows](https://cleverops.com.au/components/team/team-directory-rows): Dense industry-neutral directory rows under alphabetical mono group headers, name, role, and location column ruled by hairlines; scales from ten people to two hundred.
- [Editorial Team Grid](https://cleverops.com.au/components/team/team-grid-editorial): Industry-neutral team grid, initials-panel portraits, mono focus-area lines, and link icons with real visible labels; one principal card carries a hairline primary keyline.
- [Team Hover Dossier](https://cleverops.com.au/components/team/team-hover-dossier): Master-detail React team section, hover or focus a roster name to swap a monogram dossier panel; Tailwind hairlines, tabs semantics, no photos needed.
- [Team Timezone Strip](https://cleverops.com.au/components/team/team-timezone-strip): Distributed React team strip grouping members under city and UTC-offset mono headers, a Tailwind hairline band for remote-team pages, no headshots or WebGL.
- [How Video Consults Work](https://cleverops.com.au/components/health/telehealth-explainer): Video consults demystified in three calm steps, a plain-language tech-requirements note, a quiet privacy assurance line, and zero jargon. The panel that makes telehealth feel ordinary.
- [Agency Studio Template](https://cleverops.com.au/components/templates/template-agency-studio): A portfolio index for a design studio: display-type statement hero, oversized case rows with hover and tap preview plates, capability accordion, results strip, recognition ledger, brief form.
- [AI Startup Landing Page Template](https://cleverops.com.au/components/templates/template-ai-startup): Agent-ops console as a full site: streaming run-trace hero with replay controls, trace anatomy timeline, eval numbers band, security ledger, usage-slider pricing, FAQ, command-palette signup.
- [Ecommerce Product Launch Template](https://cleverops.com.au/components/templates/template-ecommerce-launch): Complete one-product store where the buy box is the hero: switchable technical drawings, live pack pricing, specs ledger, review summary, shipping policy, FAQ and restock band.
- [Fitness Gym Template](https://cleverops.com.au/components/templates/template-fitness-gym): Bespoke strength-club site for Ironmark, Brunswick: plate-math bar calculator, chalkboard record board, day-tab timetable, coach totals, honest membership, free-week form.
- [Law Firm Template](https://cleverops.com.au/components/templates/template-law-firm): Complete law-firm site set as a bound legal brief, double-rule serif headings, clause-numbered practice selector, sober results band, fee disclosure accordion, partner roll, consult intake.
- [Medical Clinic Site Template](https://cleverops.com.au/components/templates/template-medical-clinic): Complete GP clinic site as a calm appointment card, reason-picker booking hero, hours and telehealth, honest Medicare fees, first-visit checklist, team, gentle FAQ and booking.
- [Nonprofit Charity Site Template](https://cleverops.com.au/components/templates/template-nonprofit): An honest annual report page for a food-rescue charity: mission, audited impact numbers, an interactive dollar split, volunteer role filter and an unguilted donate flow.
- [Real Estate Agency Template](https://cleverops.com.au/components/templates/template-real-estate): Complete independent-agency site, the listing card as art direction: address-led hero, sold ledger with one SOLD stamp, suburb reports, team, plain fees, appraisal form.
- [Fine Dining Restaurant Template](https://cleverops.com.au/components/templates/template-restaurant): A complete restaurant site set like a printed menu, double-rule cover, dot-leader course tabs, cellar disclosures, provenance ledger and a working reservation sheet.
- [SaaS Landing Page Template](https://cleverops.com.au/components/templates/template-saas-landing): Bespoke revops landing site for Solstice: self-drawing eclipse hero, four-phase close console with live reconcile status, metrics, security, pricing toggle, FAQ.
- [Trades Services Landing Template](https://cleverops.com.au/components/templates/template-trades-services): Complete trades site drawn as a drafting sheet set, measure-up hero with live job cards, opening service rows, stamped rate card, interactive service rings, booking sheet, title-block footer.
- [Testimonial Annotated](https://cleverops.com.au/components/testimonials/testimonial-annotated): One long-form customer story read like an annotated manuscript, numbered mono metric callouts in the margin wire to the exact sentences that earned them.
- [Testimonial Audio Strip](https://cleverops.com.au/components/testimonials/testimonial-audio-strip): Podcast-style quote strip, deterministic SVG waveform, mono timestamp and a play affordance that hands playback to an onPlay callback. Ships zero audio dependencies.
- [Testimonial Before After](https://cleverops.com.au/components/testimonials/testimonial-before-after): Paired quotes from the same customer, what they said before and after 90 days, as two linked cards joined by a drawn connector, with honest mono dates.
- [Testimonial Interview](https://cleverops.com.au/components/testimonials/testimonial-interview): Editorial Q&A testimonial, mono interviewer questions over one customer's long-form answers, closed by a monogram byline. An interview-excerpt block for React and Tailwind.
- [Testimonial Ledger](https://cleverops.com.au/components/testimonials/testimonial-ledger): Testimonials filed as a ruled ledger, mono index numbers and one-line pull-quotes that expand on click to the full quote and attribution. Proof you can audit.
- [Testimonial Logo Lockup](https://cleverops.com.au/components/testimonials/testimonial-logo-lockup): A single decisive quote locked up with the customer's typographic wordmark, role line, and a hairline stat row beneath, one-customer depth instead of a wall of voices.
- [Testimonial Marquee](https://cleverops.com.au/components/testimonials/testimonial-marquee): Two counter-scrolling rows of customer quotes with edge fades, pure CSS, pauses on hover, and renders a static grid under reduced motion.
- [Testimonial Roster](https://cleverops.com.au/components/testimonials/testimonial-roster): Roster-driven testimonials, activate a name row with its monogram to swap the oversized quote on stage. Photo-free, random-access social proof for React and Tailwind pages.
- [Testimonial Spotlight](https://cleverops.com.au/components/testimonials/testimonial-spotlight): One voice at a time, an oversized editorial quote with a quiet author rail, mono counter and hairline prev/next controls. A reading, not a carousel.
- [Testimonial Thread](https://cleverops.com.au/components/testimonials/testimonial-thread): Customer praise as a chronological message thread, monogram chips, mono timestamps and day dividers on a hairline spine. Conversational social proof for React and Tailwind sites.
- [Testimonial Video Card](https://cleverops.com.au/components/testimonials/testimonial-video-card): A quote card with a structural video frame, viewfinder ticks, play affordance and a mono duration chip, that hands playback to an onPlay callback. The frame is the design.
- [Testimonial Wall](https://cleverops.com.au/components/testimonials/testimonial-wall): A bento-weighted wall of quote cards behind hairline seams, mixed cell sizes give one featured voice the floor while the chorus settles in a single staggered reveal.
- [Annotate Callouts](https://cleverops.com.au/components/text-effects/text-annotate-callouts): Inline annotation system, marked phrases carry numbered mono superscripts wired to margin notes that reveal as each mark scrolls into view. Editorial footnotes, live on the page.
- [Baseline Wave](https://cleverops.com.au/components/text-effects/text-baseline-wave): A wave travels the baseline once, characters lift and settle as it passes, like a breeze crossing the line. One pass, then stillness.
- [Blur Focus](https://cleverops.com.au/components/text-effects/text-blur-focus): Words rack into focus one after another, a camera pulling the sentence sharp. Blur, opacity and a breath of letter-spacing resolve in reading order.
- [Compositor's Case](https://cleverops.com.au/components/text-effects/text-compositor): Type set from a visible case, sorts fly from their compartments, land mirrored in the composing stick, and one proof pull flips the React headline readable. Tailwind-token letterpress craft.
- [Dot Matrix Print](https://cleverops.com.au/components/text-effects/text-dot-matrix): The headline prints as a dot-matrix raster, a carriage sweeps once and canvas dots sized by ink density pop in column by column. React and Tailwind tokens via probes; one accent word in primary.
- [Text Fill Scrub](https://cleverops.com.au/components/lab/text-fill-scrub): An outline headline that fills with ink as the section scrolls, a clipped level rises through SVG glyphs under a meniscus hairline. React + Tailwind tokens, zero dependencies.
- [Frottage Rubbing](https://cleverops.com.au/components/text-effects/text-frottage): A graphite rubbing over hidden relief, crayon passes sweep the sheet and the React headline surfaces where pigment catches. Canvas text effect themed by Tailwind token probes.
- [Ink Bleed](https://cleverops.com.au/components/text-effects/text-ink-bleed): Letters develop like ink on wet paper, each glyph starts as a soft bleed and contracts to crisp edges, neighbouring bleeds wicking together mid-pass. One development, then stillness.
- [Kinetic Type Wall](https://cleverops.com.au/components/text-effects/text-kinetic-wall): Editorial kinetic type wall for React, outline echoes of the headline drift in alternating directions while one inked row carries the accent word. Tailwind-token themed; hover eases it to a halt.
- [Line Echo](https://cleverops.com.au/components/text-effects/text-line-echo): A display line trailed by two faint offset echoes of itself that converge into one crisp line on view, print misregistration settling into register. One pass, then stillness.
- [Marker Highlight](https://cleverops.com.au/components/text-effects/text-marker-highlight): A marker swipe draws itself behind the key phrase when it scrolls into view, hand-drawn energy with drafting-table restraint, SVG-stroked in the accent ink.
- [Mono Caption Pair](https://cleverops.com.au/components/text-effects/text-mono-caption-pair): A display statement locked to its mono caption, the caption types on only after the display settles, caret in primary ink. The library's two voices bound into one component.
- [Neon Bend](https://cleverops.com.au/components/text-effects/text-neon-bend): The tube bends first, unlit glass traces the headline stroke by stroke, gas ignites in a slow warm-up, and the React neon sign settles steady in Tailwind-token primary glow with an ink core.
- [Text on Path Scrub](https://cleverops.com.au/components/lab/text-on-path-scrub): Headline type set on a drawn SVG course for React, scroll scrubs the glyphs along the arc while the ink draws itself in sync, fully reversible. Tailwind-themed, zero dependencies.
- [Orbit Caption](https://cleverops.com.au/components/text-effects/text-orbit-caption): A mono micro-caption orbits the headline on an elliptical SVG path, slow as a survey satellite, hover or focus eases the orbit to a halt so the caption can be read.
- [Proof Loupe](https://cleverops.com.au/components/text-effects/text-proof-loupe): A proofreader's loupe sweeps the React headline once, glyphs bulge under the hairline lens with a mono kerning readout, then parks on the accent word. Fine pointers steer it; Tailwind token styled.
- [Punch Tape](https://cleverops.com.au/components/text-effects/text-punch-tape): A punched paper tape feeds through a reader head and your React headline prints glyph by glyph, the encoding visible in the holes. Tailwind tokens; one pass, then stillness.
- [Redline Proof](https://cleverops.com.au/components/text-effects/text-redline): A live redline pass over the sentence, strikethroughs draw, corrections drop in, a REV stamp lands, and the final React headline settles clean. Tailwind-token primary ink.
- [Staggered Text Reveal](https://cleverops.com.au/components/text-effects/text-reveal-stagger): Words or characters rise out of their own line-mask on scroll, text is revealed, not faded. Semantic tag control, once-only trigger, reduced-motion fallback.
- [Scatter Assemble Text](https://cleverops.com.au/components/text-effects/text-scatter-assemble): The headline arrives as debris, glyphs scattered with spin and scale fly home on individual springs, then shy away from the pointer once assembled. Pure DOM transforms.
- [Shatter Settle](https://cleverops.com.au/components/text-effects/text-shatter-settle): The set headline fractures into glyph shards, rotation, drift, depth, then every shard flies home and the line re-sets to perfect type. It departs and returns, exactly once.
- [Text Shimmer](https://cleverops.com.au/components/text-effects/text-shimmer): A band of light sweeps through the text, pure CSS, zero dependencies. Made for working states and streaming AI responses; goes still under reduced motion.
- [Split Flap](https://cleverops.com.au/components/text-effects/text-split-flap): A split-flap departure board for React, mono cells flip through seeded glyphs with mechanical fold physics and land on your message left to right. Tailwind tokens only, designed reduced-motion still.
- [Split Slide](https://cleverops.com.au/components/text-effects/text-split-slide): Multi-line text where alternating lines slide out of their masks from opposite edges with a skew that straightens on landing, editorial title-card energy.
- [Stencil Cut](https://cleverops.com.au/components/text-effects/text-stencil-cut): The headline is die-cut, never painted, a cutter traces glyph outlines, waste plates lift away, and React text reads as ink through stencil holes. Tailwind-token subtractive typography.
- [String Art](https://cleverops.com.au/components/text-effects/text-string-art): The headline built as string art, pins tap in along real glyph outlines and one continuous thread chords them until the word reads. React canvas text effect themed by Tailwind tokens.
- [Type Anatomy](https://cleverops.com.au/components/text-effects/text-type-anatomy): A type-specimen sheet that measures itself, baseline, cap and x-height guides draw over the live React headline with true counted mono readouts. Tailwind-token drafting ink.
- [Variable Pulse](https://cleverops.com.au/components/text-effects/text-variable-pulse): A weight wave travels the headline via variable-font axes, glyphs swell and relax as it passes, and the pointer presses local weight into the line like pressure on wet type.
- [Weight Emphasis](https://cleverops.com.au/components/text-effects/text-weight-emphasis): A sentence that makes its point through mass, up to three emphasis words set heavier in primary ink, revealed last in the stagger. Rhythm through weight, not color spam.
- [Toggle Reveal Pane](https://cleverops.com.au/components/interactive/toggle-reveal-pane): A labelled two-option toggle that swaps panes with a height-aware morph, monthly/annual, personal/business, using aria-pressed buttons and a crossfade that never jumps the layout.
- [Tool Call Timeline](https://cleverops.com.au/components/ai/tool-call-timeline): An agent run as a collapsible ledger timeline, mono tool names, arg and result summaries, duration chips, honest per-step status, and one level of nested sub-agent groups.
- [Tour Departures List](https://cleverops.com.au/components/travel/tour-departures-list): Upcoming small-group tour departures as a serif ledger, preformatted date ranges, tabular prices and real-text availability. A React booking list themed with Tailwind.
- [Before / After Slider](https://cleverops.com.au/components/trades/trade-before-after): Job-proof comparison, drag or arrow-key the divider between before and after panels, with honest labels and a job summary line. Built for bathroom renos, not screenshots.
- [Brands We Service](https://cleverops.com.au/components/trades/trade-brands-wall): A brands-we-service wall for React, text-only brand chips grouped by appliance, parts-stocked tags, and a call fallback. Tailwind tokens, zero logo assets.
- [Credentials Bar](https://cleverops.com.au/components/trades/trade-cred-bar): The trust strip that closes trade jobs, license number, insurance, years on the tools, and review score in one sturdy row. Mono where it's data, bold where it's pride.
- [Emergency Bar](https://cleverops.com.au/components/trades/trade-emergency-bar): A 24/7 emergency strip, a lamp that pulses once, the phone number set huge for wet thumbs, and an average-callout stat that counts up. Urgency without panic, dependable at 2am.
- [Workmanship Guarantee](https://cleverops.com.au/components/trades/trade-guarantee-panel): The guarantee set large and plain, one promise sentence in display type, terms in honest small print at a readable size, and the license and insurer line in mono. A handshake, not a legal wall.
- [Job Timeline](https://cleverops.com.au/components/trades/trade-job-timeline): Renovation job timeline React block, week-by-week phases on a vertical spine with mono date windows and heads-up disruption notes. Tailwind, plain-spoken.
- [Payment Plans](https://cleverops.com.au/components/trades/trade-payment-plans): Payment plan explainer React block for trades, weekly amounts in mono, a worked job example ledger, and honest fine print. Tailwind tokens, no BNPL branding.
- [How a Job Runs](https://cleverops.com.au/components/trades/trade-process-steps): The job pipeline set plain, quote, schedule, work, walkthrough, with big numerals, a one-line promise per step, and response-time chips. No jargon, no mystery, no surprises on the invoice.
- [Quote Banner](https://cleverops.com.au/components/trades/trade-quote-banner): A get-a-quote block built the way tradies win work, phone number first and huge, a response-time promise, and a three-line job form. No friction, no fluff.
- [Rate Card](https://cleverops.com.au/components/trades/trade-rate-card): A tradesman rate card for React, call-out fee, hourly and after-hours rates as an honest mono ledger with plain-English fine print. Tailwind tokens throughout.
- [Service Area Strip](https://cleverops.com.au/components/trades/trade-service-area): Where-we-work as a confident strip, radius statement, suburb chips grouped by zone, and a same-day badge for the home patch. Local SEO structure built in.
- [Who Shows Up](https://cleverops.com.au/components/trades/trade-team-vans): A crew strip that answers the homeowner's real question, who is coming to my house. First names, years on the tools, and the van ID in mono so the ute in the driveway matches the website.
- [Training Split Board](https://cleverops.com.au/components/fitness/training-split-board): The weekly split on the wall, seven ruled day cells with bold uppercase focus names, key lifts, mono set volumes, and honest rest days. A React and Tailwind block for gyms.
- [Transformation Strip](https://cleverops.com.au/components/fitness/transformation-strip): Member results told in numbers and words, not photos, huge stat deltas (kg down, weeks in, PB kg added) with a quote snippet each. No body imagery; inclusive by design.
- [Treatment Menu](https://cleverops.com.au/components/beauty/treatment-menu): A spa treatment menu set like a printed ritual card, serif italic treatment names, duration and price in quiet tabular figures, delicate hairline leaders. Sensory and unhurried.
- [Treatment Series](https://cleverops.com.au/components/beauty/treatment-series-packages): Prepaid treatment series set like an invitation, serif packs of three, six or nine with per-visit prices in quiet figures and an italic sharing note. React and Tailwind salon packages.
- [Trial Pass CTA](https://cleverops.com.au/components/fitness/trial-pass-cta): The first-week pass sold like a coach would, a day-by-day mini plan in three ruled rows, a plain no-lock-in honesty line, and one bold imperative CTA that closes it.
- [Tuition Payment Options](https://cleverops.com.au/components/education/tuition-payment-options): One course, three honest ways to pay, upfront, monthly, or deferred, with plain totals and a shared includes list. A React and Tailwind tuition block for course sites.
- [Type Constellation](https://cleverops.com.au/components/lab/type-constellation): Headline type as an ogl WebGL constellation: glyph-sampled points settle into letterforms, join with hairline links and part around the cursor, while the real heading stays in the DOM.
- [Vehicle Inventory Card](https://cleverops.com.au/components/automotive/vehicle-inventory-card): A dealer listing card with spec-sheet discipline, structural silhouette panel, year-make-model heading, tabular price over an honest per-week finance line, and a km/transmission/fuel meta row.
- [View Morph](https://cleverops.com.au/components/lab/view-morph): A shared-element morph kit for React on the View Transitions API, cards morph into detail sheets and back, instant fallback where unsupported. Focus-managed, reduced-motion honest.
- [Voice Waveform Bar](https://cleverops.com.au/components/ai/voice-waveform-bar): Voice agent waveform bar for React, prop-driven amplitude bars across idle, listening, processing, and speaking states, with Tailwind token styling and zero microphone access.
- [Volunteer Roles Panel](https://cleverops.com.au/components/nonprofit/volunteer-roles-panel): A volunteer get-involved panel in React, real roles with honest time commitments, plain requirements, a training reassurance and one direct sign-up action. Warm Tailwind, no guilt.
- [Voronoi Membrane](https://cleverops.com.au/components/lab/voronoi-membrane): A living cell membrane for React, Lloyd-relaxed voronoi walls drawn as canvas hairlines breathe imperceptibly while pointer pressure tenses them; one seeded cell carries the Tailwind primary tint.
- [When to Go Strip](https://cleverops.com.au/components/travel/when-to-go-strip): A when-to-go climate strip, twelve month cells with preformatted temperatures, season notes and best-time markers. A React travel almanac styled with Tailwind tokens.
- [Wine List](https://cleverops.com.au/components/restaurants/wine-list-page): The wine list set as its own document, regions as serif small-cap sections, vintage and glass/bottle prices in aligned tabular columns, one sommelier's pick carrying the keyline.
- [Zoom Portal](https://cleverops.com.au/components/lab/zoom-portal): A React scroll dive through a hairline-framed portal, the frame scales past the camera while the scene inside counter-scales into the new stage. Native scroll, fully reversible, Tailwind-themed.