CleverUI Lab, Award-Tier React Components
The Lab is where the library stops being modular and starts being cinematic. These are award-tier systems, the kind of scroll-driven, canvas-heavy work you see on Awwwards site-of-the-day winners: a scroll director that choreographs whole pages, image-sequence and SVG-mask chapter systems, kinetic variable-font heroes, shader-driven imagery, gooey and physics typography, view morphs and zoom portals. Each assumes you are building a page around it, not dropping it into a grid. Budget one Lab piece per page and let it carry the experience.
29 components · MIT licensed · installable with the shadcn CLI
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.
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.
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.
NewContour 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.
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.
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.
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
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.
NewInk 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.
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.
NewLiquid 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.
NewLumen 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
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.
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.
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.
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.
NewRefraction 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.
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.
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.
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.
NewSpecimen 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.
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.
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.
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.
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.
NewType 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.
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.
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.
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.
Frequently asked questions
What does "award-tier" mean in practice?
These are the systems agencies build for campaign sites and award submissions, scroll choreography, shader imagery, kinetic type, packaged as installable components. They trade the plug-anywhere simplicity of the core tiers for experiences that define an entire page.
Are Lab components harder to integrate?
Somewhat, most orchestrate scroll or canvas across a section you design around them, and several have peer dependencies like react-dom portals or ogl for shaders. Each component documents its assumptions; expect an afternoon of composition, not a five-minute drop-in.
Will Lab components work on mobile and for users who prefer reduced motion?
Yes, deliberately: every Lab piece ships a reduced-motion fallback that keeps the content readable as static or simply-faded layout, and touch interactions replace hover-dependent mechanics. The spectacle is progressive enhancement, never a gate.