Motion, made ours.
41 references mapped to the Cojeev family. Existing effects keep their names; new mechanisms get their own components.
A landing page with room to breathe
Start with the existing Text Reveal for one clear headline. Let Scroll Reveal pace the story, then Scroll Expand open a product demonstration. Use Accordion Gallery to explore the component family. A single Wave Wipe can bridge two scenes.
Keep cursor effects, falling words and denser fields inside an optional playground with pause controls. Avoid stacking several continuous animations in the same viewport. On touch and reduced motion, the content and ordinary controls remain the main experience.
Already in the family
Text Loop, Circular Text and Curved Loop use Text Ribbon. Split Text uses Text Reveal. Text Pressure is the pressure variant of Variable Proximity. Image Masking and Clip Path share one component with mask and clip methods. These six mappings avoid duplicate registry entries.
Every reference, one clear home
Typography Vortex
Typography
Optional playground backdrop; skip the main reading flow.
SVG glyph rings retain the vortex and pointer lens; dust is bounded and suction recenters the rings rather than reproducing the upstream bitmap renderer.
View original reference ↗Text Loop → Text ribbon
Typography
Use as a restrained brand band below the hero; the main headline can stay static.
Already implemented by TextRibbon shapes and measurement; no new alias component.
View original reference ↗Particle Text
Typography
Optional playground or short brand introduction; skip simultaneous hero loops.
Canvas sampling is capped by stage size and sample step. DOM text stays in the accessibility tree; fallback is visible during stillness.
View original reference ↗Warp Text
Typography
Small expressive interlude; avoid navigation, instructions and primary value proposition.
Uses SVG fractal-noise displacement over actual wrapping DOM text rather than WebGL FBM; no exact shader-fidelity claim.
View original reference ↗Split Text → Text reveal
Typography
Recommended hero headline effect, once per visit.
Existing TextReveal already supplies grapheme, word and measured line splits and multiple reveal treatments.
View original reference ↗Circular Text → Text ribbon
Typography
Small secondary brand seal; skip if a Text Loop band is already used.
TextRibbon circle provides the same readable circular travel and hover controls. It travels text on a measured circle rather than manually placing equal-width glyphs.
View original reference ↗Text Pressure → Variable Proximity
Typography
Optional playground specimen; keep essential headings independently readable.
Consolidated into VariableProximity pressure variant. Uses only shipped Bricolage axes wght 200–800 and wdth 75–100; no Roboto import or simulated italic.
View original reference ↗Curved Loop → Text ribbon
Typography
Optional component-discovery separator, at most one text marquee on a page.
Existing TextRibbon arch, curvature, drag inertia, arrows and Home already cover the mechanism.
View original reference ↗Falling Text
Typography
Playground only; skip product narrative because motion disrupts reading.
Original bounded rectangle physics, at most 80 words, finite 4.2-second settling. No word dragging or full rigid-body rotational solver.
View original reference ↗Scroll Reveal
Typography
Recommended narrative reveal below the hero, with conservative blur.
Native scroll listener scoped to the selected target, or controlled 0–1 progress. Existing TextReveal is a one-shot entrance and does not cover this mechanism.
View original reference ↗Variable Proximity
Typography
Use on an optional large specimen; not a required interaction in the landing narrative.
Local event-driven interpolation of supported Bricolage wght and wdth axes; does not accept arbitrary fonts or axis strings.
View original reference ↗Word Stream
Typography
Short optional story scene with a Replay button; not the primary long-form message.
Native finite clock with wrapping phrases. The original is a Remotion frame sequence and assumes one unwrapped video line. WordRelay alone lacks this horizontal stream mechanism.
View original reference ↗Caret Swap
Typography
A single secondary before/after statement; avoid making the primary promise disappear.
Native finite clock, full measured footprint and stable accessible target. Existing WritingCaret only blinks and does not implement the phrase exchange.
View original reference ↗Zoom Words
Typography
Optional film-like interlude or playground; skip the main headline for readability.
Measures real DOM word widths rather than estimated character widths; still mode restores the complete wrapping sentence.
View original reference ↗Scroll Expand
Effects
Use a single product demonstration after the hero.
ScrollOrganism only deforms an ornament; FloatLayer reveals/translates. Neither expands caller content.
View original reference ↗Ripple Distortion
Effects
Optional material playground; keep important text outside.
FlowSculpture distorts a rendered 3D object, not a supplied flat image.
View original reference ↗Elastic Mesh
Effects
Optional playground specimen.
No existing elastic 2D textured grid.
View original reference ↗Swarm Cursor
Effects
Optional playground only; avoid global landing cursors.
SemanticBloom attracts particles to words and liquid joins; GuidedPointer travels through prescribed waypoints. Neither is a scoped pointer-following flock.
View original reference ↗Pixel Swap
Effects
Use in one before/after demonstration.
Presence mask is a single shape reveal, not a tiled content exchange.
View original reference ↗Orbit Images
Creative
Optional library family vignette with pause.
SculptureOrbit is a 3D viewer camera; AmbientBackground orbit uses decorative shapes, not caller image cards.
View original reference ↗Target Cursor
Effects
Use within an interactive specimen only.
GuidedPointer uses author-defined coordinates rather than tracking real controls.
View original reference ↗Magic Rings
Backgrounds
Optional small closing accent, with pause.
No existing expanding ring field.
View original reference ↗Ghost Cursor
Effects
Playground only.
No existing local free-pointer translucent trail.
View original reference ↗Click Spark
Effects
Optional single CTA feedback; retain ordinary pressed and focus states.
Flow press deforms the control edge but does not paint radial sparks.
View original reference ↗Strands
Backgrounds
Optional quiet section accent; one instance at a time.
ContourField draws topographic lines, not bundled crossing strands.
View original reference ↗Image Trail
Effects
An optional gallery playground.
No existing pointer image-trail buffer.
View original reference ↗Meta Balls
Backgrounds
Optional material specimen with a still frame.
SemanticBloom combines a wordmark and particles; this is a standalone continuous scalar-field contour surface.
View original reference ↗Infinite Spiral
Creative
Optional playground; keep the main landing page narrative still.
Original React and SVG adaptation; no upstream dependency or exact shader-fidelity claim.
View original reference ↗Accordion Gallery
Creative
Recommended component discovery section after the feature demonstration.
Original React and SVG adaptation; no upstream dependency or exact shader-fidelity claim.
View original reference ↗Option Wheel
Forms
Optional compact theme or discipline picker beside a specimen.
Original React and SVG adaptation; no upstream dependency or exact shader-fidelity claim.
View original reference ↗Grain Dissolve
Effects
Optional scene bridge in the playground; avoid repeated text transitions.
Original React and SVG adaptation; no upstream dependency or exact shader-fidelity claim.
View original reference ↗Wave Wipe
Effects
Recommended once between narrative and feature demonstration.
Original React and SVG adaptation; no upstream dependency or exact shader-fidelity claim.
View original reference ↗Dither Dissolve
Effects
Optional process comparison in the playground; skip the main reading flow.
Original React and SVG adaptation; no upstream dependency or exact shader-fidelity claim.
View original reference ↗Portal Field
Backgrounds
Optional single hero or final invitation backdrop at low intensity; skip if another ambient field already occupies that scene.
Original annular distance shader with analytic domain warp, narrow luminous core, broad fringe and a quiet inner wash. No upstream authentication UI, external font or dependency copied.
View original reference ↗Article Headings
Typography
Optional editorial or field-notes section near the bottom of the landing page; use once on entry, keep the main hero to the chosen headline effect.
Original deterministic noise/frontier implementation over grapheme slots. It does not mutate semantic heading text like the upstream text-node walker. Replays are explicit and cancellations settle readable content.
View original reference ↗Motion Drawer
Layout
Useful for mobile library navigation.
Compose existing Sheet modal mechanics; adds handle-only drag dismissal and trigger travel.
View original reference ↗Linear Modal
Layout
Useful for component detail stories; keep primary navigation separate.
Composes Radix dialog focus mechanics with Motion shared-layout surfaces; existing Dialog alone has no card-to-dialog continuity.
View original reference ↗Image Masking
Creative
Use one restrained masked brand image beside the narrative.
One semantic image API covers both masking references; existing Shape is decorative and Presence is a lifecycle reveal.
View original reference ↗Clip Path → Image Masking
Creative
Use the same Image Masking family; do not stack competing image frames.
Consolidated into ImageMasking method="clip"; no duplicate alias component.
View original reference ↗Buy Me Coffee
Actions
Optional footer support link only when a real destination exists.
Original support interaction with explicit native href; no payment processing or simulated transaction.
View original reference ↗Swapy
Layout
Optional arrange-your-workspace playground; avoid reorderable essential landing content.
Original state-driven swap behavior without the external Swapy package; caller receives every order change.
View original reference ↗Ready for your project
Every component page includes a live example, copyable source, an installation command and the component API. Install the variants you need from the public Cojeev registry.