` attribute to the root element. --- # Lamp Source: docs/components/effects/lamp.mdx > A conic-gradient lamp that ignites and reveals a headline as it scrolls into view. import { Lamp } from "@godui/components"; import { LampDemo } from "@/components/demos/lamp-demo";

Build something the world remembers

); }`} > ### Installation Two mirrored conic gradients widen and brighten from a center seam while a glow blooms beneath them. The children rise into the light in sync. Everything runs on `whileInView`, so the lamp ignites once as the section scrolls into view — and renders fully lit immediately under `prefers-reduced-motion`. ### Usage ```tsx import { Lamp } from "@/components/godui/lamp"; ``` ```tsx

Your headline

``` #### Custom color `color` accepts any CSS color and drives both cones and the glow. ```tsx

Violet light

``` ### Props | Prop | Type | Default | Description | | ------- | -------- | ------------- | ---------------------------------------- | | `color` | `string` | `var(--primary)` | Accent color of the light. | `Lamp` also forwards every standard `

` attribute to the root element. --- # Liquid Image Source: docs/components/effects/liquid-image.mdx > A premium hover effect that ripples and distorts an image like liquid, intensifying with cursor speed. import { LiquidImage } from "@godui/components"; import { LiquidImageDemo } from "@/components/demos/liquid-image-demo"; Hover an image and it distorts like the surface of water — the ripple ramps in, follows your cursor speed, and settles with a damped wave when you leave. Hover the images below.

); }`} > ### Installation `LiquidImage` distorts the image with an SVG `feTurbulence` + `feDisplacementMap` filter — supported in every modern browser. The displacement scale is eased toward its target in a single `requestAnimationFrame` loop and written straight to the filter, so the image itself never re-renders. Cursor velocity intensifies the ripple; leaving the image lets it settle back with a damped wave. ### Usage ```tsx import { LiquidImage } from "@/components/godui/liquid-image"; ``` ```tsx ``` #### Always on Set `trigger="always"` for a continuously breathing ripple, independent of hover. ```tsx ``` #### Tuning the ripple `strength` is the peak displacement in pixels; `frequency` controls the ripple scale — smaller is larger and smoother. ```tsx ``` ### Accessibility & fallback When `prefers-reduced-motion` is set — or if SVG `filter: url()` is unavailable — `LiquidImage` falls back to a gentle CSS scale-and-brighten on hover, so the component degrades cleanly. Always pass a meaningful `alt`. ### Props | Prop | Type | Default | Description | | ------------- | ---------------------- | --------- | ------------------------------------------------------------ | | `src` | `string` | — | Image source. | | `alt` | `string` | — | Accessible description of the image. | | `strength` | `number` | `28` | Peak ripple displacement on interaction, in px. | | `frequency` | `number` | `0.012` | Turbulence frequency — smaller gives larger, smoother ripples. | | `trigger` | `"hover" \| "always"` | `"hover"` | When the ripple is active. | | `imgClassName`| `string` | — | Classes for the inner `` (sizing, aspect, object-fit). | `LiquidImage` also forwards every standard `

` attribute to the root element. --- # Marquee Source: docs/components/effects/marquee.mdx > An infinite, seamless scrolling row or column of content that pauses on hover. import { Marquee } from "@godui/components"; import { MarqueeDemo } from "@/components/demos/marquee-demo";

Trusted by fast-moving teams

{logos.map((name) => ( {name} ))}

); }`} > ### Installation `Marquee` duplicates its children into a seamless looping track. The animation is pure CSS, so it stays smooth even with many items, and respects `prefers-reduced-motion`. ### Usage ```tsx import { Marquee } from "@/components/godui/marquee"; ``` ```tsx {items.map((item) => ( ))} ``` #### Direction `"left"` / `"right"` scroll horizontally; `"up"` / `"down"` scroll vertically (give the marquee a fixed height). ```tsx ``` #### Speed `speed` is the loop duration in seconds — higher is slower. ```tsx ``` ### Examples #### Reverse direction {["Design", "Engineering", "Motion", "Craft", "Detail", "Systems"].map((t) => ( {t} ))} `} > {["Design", "Engineering", "Motion", "Craft", "Detail", "Systems"].map((t) => ( {t} ))} #### Vertical Give a vertical marquee a fixed height; it scrolls along the column. {reviews.map((r) => (

{r}

))} `} >

{["Smoothest UI all year", "Spring physics done right", "It just worked", "Feels premium", "Shipped in a day"].map((r) => (

{r}

))}

### Props | Prop | Type | Default | Description | | -------------- | ---------------------------------------- | -------- | --------------------------------------------------- | | `direction` | `"left" \| "right" \| "up" \| "down"` | `"left"` | Scroll direction. | | `speed` | `number` | `40` | Loop duration in seconds — higher is slower. | | `pauseOnHover` | `boolean` | `true` | Pause while the pointer is over the marquee. | | `fade` | `boolean` | `true` | Fade the leading and trailing edges. | | `repeat` | `number` | `4` | Times the children are duplicated to fill the track.| `Marquee` also forwards every standard `

` attribute to the root element. --- # Particle Dissolve Source: docs/components/effects/particle-dissolve.mdx > Text or an image is sampled into particles that scatter and reform — a dramatic entrance or transition. import { ParticleDissolve } from "@godui/components"; import { ParticleDissolveDemo } from "@/components/demos/particle-dissolve-demo"; The source — a headline, a logo, or an image — is sampled into thousands of particles that fly in from scatter to form the shape, hold with a subtle shimmer, then disperse and reform. A strong second-read moment for a hero. ; }`} > ### Installation The source is drawn to an offscreen canvas and sampled on a grid; every opaque pixel becomes a particle whose colour is taken from the source (so images keep their colours). A single `requestAnimationFrame` loop eases a global form/scatter progress, with a per-particle delay for the stagger. ### Usage ```tsx import { ParticleDissolve } from "@/components/godui/particle-dissolve"; ``` #### Text ```tsx ``` The particle colour follows the canvas's CSS `color`, so a Tailwind text utility (`text-primary`) just works — or pass an explicit `color`. #### Image ```tsx ``` Images must be same-origin or CORS-enabled to be sampled. #### Modes & triggers `mode` sets the resting behaviour (`assemble`, `disperse`, or `loop`); `trigger` decides when it starts (`mount`, `in-view`, or `hover`). ```tsx ``` ### Accessibility The canvas exposes the text as its `aria-label` (`role="img"`). When `prefers-reduced-motion` is set, the shape is drawn once, fully formed, with no animation. ### Props | Prop | Type | Default | Description | | -------------- | --------------------------------------- | -------------- | ---------------------------------------------------- | | `text` | `string` | — | Text to render as particles (ignored when `src` set).| | `src` | `string` | — | Image URL to sample into particles. | | `mode` | `"assemble" \| "disperse" \| "loop"` | `"assemble"` | Resting behaviour once triggered. | | `trigger` | `"mount" \| "in-view" \| "hover"` | `"in-view"` | When the animation starts. | | `density` | `number` | `4` | Pixel sampling step — smaller is denser. | | `particleSize` | `number` | `2` | Particle dot size in px. | | `color` | `string` | text color | Fill colour for text particles. | | `width` / `height` | `number` | `640` / `240` | Canvas size in CSS px. | `ParticleDissolve` also forwards every standard `

`} >

{["Plan", "Build", "Ship", "Measure", "Iterate", "Scale"].map((item, i) => (

{item}

))}

#### From the left, no blur

Slides in from the left

`} >

Slides in from the left

### Props | Prop | Type | Default | Description | | -------------- | ---------------------------------------- | ------- | ---------------------------------------------------- | | `direction` | `"up" \| "down" \| "left" \| "right"` | `"up"` | Direction the content travels in from. | | `distance` | `number` | `40` | Travel distance in pixels. | | `blur` | `boolean` | `true` | Blur the content in as it reveals. | | `delay` | `number` | `0` | Delay in seconds before the reveal starts. | | `once` | `boolean` | `true` | Reveal only the first time it enters the viewport. | | `velocitySkew` | `boolean` | `false` | Skew the content by scroll velocity. | `ScrollReveal` also forwards every standard `

` attribute to the root element. --- # Spotlight Card Source: docs/components/effects/spotlight-card.mdx > A card with a radial spotlight glow that follows the pointer, optionally lighting the border. import { SpotlightCard } from "@godui/components"; import { SpotlightCardDemo } from "@/components/demos/spotlight-card-demo";

Pro

$24 /mo

); }`} > ### Installation `SpotlightCard` writes the pointer position to CSS variables on each move — no React re-render — and reveals a radial gradient that fades in on hover. The border highlight is the same gradient masked to the 1px ring. ### Usage ```tsx import { SpotlightCard } from "@/components/godui/spotlight-card"; ``` ```tsx

Title

Body copy

``` #### Custom glow `glowColor` accepts any CSS color; `radius` controls the spotlight size in pixels. ```tsx ``` #### Without a border glow ```tsx ``` ### Examples #### Single card A standalone surface — move the pointer across it to see the glow track and the border light up.

Pointer-aware surface

A soft radial glow follows the cursor and lights the 1px border.

`} >

Pointer-aware surface

A soft radial glow follows the cursor and lights the 1px border.

#### Custom glow color

Any color you like

Pass any CSS color through glowColor.

`} >

Any color you like

Pass any CSS color through glowColor.

#### Border glow With `border` enabled (the default), the same gradient is masked to the 1px ring, so the border itself lights up where the pointer is closest. Move along the edges.

Trace the edge

The border brightens where the pointer is closest, then fades behind it.

`} >

Trace the edge

The border brightens where the pointer is closest, then fades behind it.

### Props | Prop | Type | Default | Description | | ----------- | --------- | ------------------------------------------------------- | ---------------------------------------- | | `glowColor` | `string` | `color-mix(in oklch, var(--primary) 40%, transparent)` | Color of the spotlight glow. | | `radius` | `number` | `350` | Spotlight radius in pixels. | | `border` | `boolean` | `true` | Also light the card border on move. | `SpotlightCard` also forwards every standard `

` attribute to the root element. --- # Spotlight Reveal Source: docs/components/effects/spotlight-reveal.mdx > A cursor-following flashlight that cuts through the top layer to expose a hidden layer beneath. import { SpotlightReveal } from "@godui/components"; import { SpotlightRevealDemo } from "@/components/demos/spotlight-reveal-demo"; Two layers stacked, with a soft spotlight that follows your cursor and punches a hole in the top one — revealing whatever sits beneath. Idle, the spotlight drifts to invite a hover; click to pin it in place. Move across the panel below.

You found it

} >

Move your cursor

); }`} > ### Installation The cover layer is masked with a feathered radial gradient whose centre is eased toward the pointer in a single `requestAnimationFrame` loop — the lag gives the spotlight a liquid feel. When idle, the centre drifts in a slow ellipse. ### Usage ```tsx import { SpotlightReveal } from "@/components/godui/spotlight-reveal"; ``` Pass the hidden layer to `reveal` and the cover layer as children. ```tsx }> ``` #### Tuning the light `radius` sizes the spotlight, `softness` feathers its edge, and `ease` controls how much the light lags the cursor (lower = more lag). ```tsx }> ``` ### Accessibility Both layers are real DOM, so their text remains selectable and readable to assistive tech. When `prefers-reduced-motion` is set, the mask is dropped and the cover simply sits at a calm, slightly transparent blend over the layer beneath. ### Props | Prop | Type | Default | Description | | ---------- | ---------------- | ------- | ------------------------------------------------------------ | | `reveal` | `React.ReactNode`| — | The hidden layer exposed under the spotlight. | | `radius` | `number` | `150` | Spotlight radius in px. | | `softness` | `number` | `0.55` | Edge feather, 0 (hard) – 1 (very soft). | | `ease` | `number` | `0.16` | Follow easing per frame, 0 (frozen) – 1 (instant). | The cover layer is passed as `children`. `SpotlightReveal` also forwards every standard `
` attribute to the root element. --- # Liquid Glass Card Source: docs/components/glass/liquid-glass-card.mdx > A glass panel that refracts the content behind it with a mouse-tracked specular highlight. import { LiquidGlassCard } from "@godui/components";
Liquid Glass

Move your cursor across the panel.

); }`} >

Liquid Glass

Move your cursor across the panel.

### Installation `LiquidGlassCard` wraps any content in a glass panel that refracts the live DOM behind it. It builds a per-instance SVG displacement map sized to the panel and applies it through `backdrop-filter`, running the displacement at three scales to fringe color at the edges (chromatic aberration). A radial highlight tracks the pointer and fades out when it leaves. True refraction requires `backdrop-filter: url()` (Chrome and Edge). In browsers without it the card gracefully falls back to a plain frosted blur, so it never renders as a broken transparent box. For a circular lens that follows the cursor over arbitrary content, see [Liquid Glass Lens](/docs/components/effects/liquid-glass-lens). ### Usage ```tsx import { LiquidGlassCard } from "@/components/godui/liquid-glass-card"; ``` Place it over any colorful or detailed backdrop — the more there is behind it, the more the refraction reads: ```tsx
{/* ...page content / image background... */}
Frosted panel

Your content sits crisply above the glass.

``` #### Tuning the optics Push `strength` and `dispersion` up for a heavier, more prismatic lens, or down for a subtle pane of frost. ```tsx Deep refraction ``` ### Props | Prop | Type | Default | Description | | ------------ | -------- | ----------------------- | ----------------------------------------------------------- | | `radius` | `number` | `28` | Corner radius in px. | | `blur` | `number` | `2` | Frost (backdrop blur) in px. | | `strength` | `number` | `60` | Refraction displacement scale — how hard the edges bend. | | `dispersion` | `number` | `0.15` | Chromatic aberration, `0`–`1`. Splits the R/G/B refraction. | | `saturation` | `number` | `1.6` | Backdrop saturation multiplier. | | `tint` | `string` | `rgba(255,255,255,.08)` | Glass tint color. | | `sheen` | `number` | `0.5` | Specular highlight intensity, `0`–`1`. | `LiquidGlassCard` also forwards every standard `
` attribute (`className`, `style`, `id`, …) to the root element. --- # Liquid Glass Lens Source: docs/components/glass/liquid-glass-lens.mdx > A circular glass lens that floats over your content and follows the cursor, refracting everything beneath it. import { LiquidGlassLens } from "@godui/components";
Liquid Glass

); }`} >

Liquid Glass

### Installation `LiquidGlassLens` is a circular glass disc that floats over its parent's content and tracks the cursor, refracting everything beneath it through a converging SVG displacement map. It only appears while the pointer is over the parent and fades out on leave. It is `pointer-events-none`, so it never blocks clicks. True refraction requires `backdrop-filter: url()` (Chrome and Edge). In browsers without it the lens gracefully falls back to a plain frosted blur. For a static glass panel that wraps your own content, see [Liquid Glass Card](/docs/components/effects/liquid-glass-card). ### Usage The parent must be positioned (`relative`). Drop the lens in as a sibling of the content you want it to roam over: ```tsx import { LiquidGlassLens } from "@/components/godui/liquid-glass-lens";
{/* ...images, text, any page content... */}
``` #### Sizing `size` is the lens diameter in px. Bump `strength` for a stronger magnify. ```tsx ``` ### Props | Prop | Type | Default | Description | | ------------ | -------- | ----------------------- | ----------------------------------------------------------- | | `size` | `number` | `160` | Diameter of the circular lens in px. | | `blur` | `number` | `2` | Frost (backdrop blur) in px. | | `strength` | `number` | `80` | Refraction displacement scale — how hard the lens bends. | | `dispersion` | `number` | `0.15` | Chromatic aberration, `0`–`1`. Splits the R/G/B refraction. | | `saturation` | `number` | `1.6` | Backdrop saturation multiplier. | | `tint` | `string` | `rgba(255,255,255,.08)` | Glass tint color. | | `sheen` | `number` | `0.5` | Specular highlight intensity, `0`–`1`. | `LiquidGlassLens` also forwards every standard `
` attribute (`className`, `style`, `id`, …) to the root element. --- # Components Source: docs/components/index.mdx > Browse the full GodUI component collection. import { Cards } from "fumadocs-ui/components/card"; ### Buttons A floating action button that gooey-morphs to extrude its satellite actions like liquid metaballs. Press and hold to confirm a destructive action — a radial fill commits at 100%, releasing early cancels. A pushable 3D button with rainbow edge animation and solid front face. A button whose content is magnetically pulled toward the cursor, springing back on exit. A button whose face wipes away on hover via an animated CSS sprite-sheet mask, revealing the label behind it. A 3D button whose front face folds back to reveal a controlled progress bar while loading. A button with an animated shimmering border light effect. A drag-to-confirm thumb for high-stakes actions — slide past the threshold to commit, release early to spring back. ### Inputs A 3D layered text input that lifts on focus with an optional rainbow edge animation. A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake. ### Navigation A breadcrumb trail with hover-fill pills, animated path changes, and an overflow that collapses into an expandable popover. A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state. A right-click menu that springs from the cursor point and flips to stay in the viewport, with shortcuts and destructive actions. A macOS-style dock whose items magnify with spring physics as the pointer moves across them. An accessible dropdown that springs open from its trigger edge, with submenus, shortcuts, separators, and keyboard navigation. A faceted filter bar with searchable multi-select popovers, count badges, and active filters that spring in and out as chips. A segmented tab bar where the selected option lifts into a 3D button with an optional rainbow edge. A Vercel-style menu with a direction-aware highlight and a panel that springs and height-morphs between triggers. A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator. An iOS-style selector with a sliding pill that springs between options. A mobile bottom navigation where a shared-element blob slides under the active tab and the icon gives a haptic-style pop. ### Overlays A tooltip that springs in and tilts in 3D as the pointer moves across its trigger. A ⌘K command menu with fuzzy filtering, keyboard navigation, and spring enter / exit. A draggable bottom sheet with rubber-band physics, snap points, and flick-to-dismiss. An Apple-inspired pill that springs between size presets while its content cross-fades. A context toolbar that springs into view with magnetic, morphing action buttons. A card that physically morphs into a modal through a shared layout, then springs back on close. Stacked, swipe-dismissible toasts with an imperative `toast()` API. ### Layout A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes. A testimonial carousel with a shuffling image stack and crossfading quotes. Overlapping avatars that fan apart on hover, with a +N overflow chip. A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover. A 3D stack of cards that cycles through a showcase loop, with pointer parallax and spring re-flow. Horizontal image panels that expand on hover to reveal their caption — an elegant, space-efficient gallery. A draggable before/after slider with clip-path reveal, keyboard support, and a pulsing handle hint. A vertical stack of cards where one expands to its full view while the rest collapse to compact pills. A drag-to-reorder list where items lift on grab, spring to place, and neighbours flow around them. Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section. A step indicator with a spring-filled progress line and a number-to-checkmark morph. A physics, Tinder-style swipeable card deck with throw-to-dismiss, directional intent, and keyboard controls. A card that tilts in 3D toward the pointer with parallax depth and a specular glare. ### Text Gradient text with a rainbow aurora that drifts across the letters. Variable-font text whose weight springs up under an automatic spotlight or the pointer. Draw hand-drawn sketch annotations over inline text — highlight, underline, box, circle, and more. Animates a number to its target value with spring physics when scrolled into view. Staggered entrance animations for headlines and copy, split by word, character, or line. Characters cycle through random glyphs and resolve into the target text — a decrypt / matrix reveal. ### AI A vertical timeline of agent steps with live status, a spring-filled connector, and collapsible tool output. A streaming chat surface — messages spring in, tokens reveal, and the view auto-sticks to the latest message. An AI input box with auto-grow, attachment chips, a model picker, and a send-to-stop morph while streaming. Animated starter prompts that stagger in, lift on hover, and feed straight into the composer. Inline citation pills that spring out a rich preview card, plus a collapsible source list. A Siri-style audio-reactive orb that breathes when idle, pulses while listening, and swells with the voice as it speaks. ### Collaboration Figma-style annotation pins that spring in and expand into a threaded comment popover. Smoothly interpolated multiplayer cursors with name flags and optional cursor-chat. Live avatars with status rings and spring join/leave, plus a +N overflow that opens a presence list. ### Visualizations An animated gradient beam that travels along a path connecting two separate nodes. A draggable, auto-rotating WebGL globe with glowing location markers. Icons that orbit a center point on a configurable ring, staying upright as they travel. ### Effects An animated beam of light that travels around the border of its container. A physics-based confetti burst with an imperative fire API for celebratory moments. A spring-lagged blend-mode cursor that trails the pointer and swells over interactive elements. Images spawn along the pointer's path, pop in, and drift away — the signature portfolio hover effect. A conic-gradient lamp that ignites and reveals a headline as it scrolls into view. A premium hover effect that ripples and distorts an image like liquid, intensifying with cursor speed. An infinite, seamless scrolling row or column of content that pauses on hover. Text or an image is sampled into particles that scatter and reform — a dramatic entrance or transition. A spring-smoothed reading indicator — a pinned top bar or a fading back-to-top ring. Reveals its children with a spring as they scroll into view, with optional velocity skew. A card with a radial spotlight glow that follows the pointer and lights the border. A cursor-following flashlight that cuts through the top layer to expose a hidden layer beneath. ### Backgrounds A technical lattice — lines, dots, or a perspective floor — with a light sweep and cursor spotlight. Full-bleed decorative backgrounds — radial and corner gradient washes — selectable by variant. Full-bleed effect backgrounds — radial glows, aurora dreams, and soft pastel washes — selectable by variant. Particles streaming along an evolving noise vector field, leaving silky fading trails. Full-bleed geometric backgrounds — grids, dashed grids, diagonal crosses, and masked fades — selectable by variant. Full-bleed gradient backgrounds — radial glows, aurora washes, and depth fades — selectable by variant. Volumetric god-rays that slowly sweep and breathe, with optional film grain. Pure CSS. Gooey blobs that drift, collide, and merge under an SVG goo filter — with a cursor blob. A grid of flickering squares with a cursor spotlight that lights up nearby pixels. Slowly drifting topographic contour lines — a living elevation map drawn with marching squares. A depth starfield you fly through — cursor parallax and an optional hyperspace warp. ### Glass A glass panel that refracts the content behind it with a mouse-tracked specular highlight. A circular glass lens that floats over your content and follows the cursor, refracting everything beneath it. --- # Magic Input Source: docs/components/inputs/magic-input.mdx > A 3D layered text input that lifts on focus with an optional rainbow edge animation. import { MagicInput } from "@godui/components";
); }`} >

### Variants The `variant` tints the 3D edge. It shows when `rainbow={false}` (the rainbow gradient otherwise overrides the edge while focused).

); }`} >

### Depth `depth="focus"` (default) stays flat until focused. `depth="always"` keeps the raised 3D look at rest. ); }`} >

### Sizes ); }`} >

### Submit button Pass `onSubmit` to render an arrow button on the right. It fires with the current value on click or when Enter is pressed. Without `onSubmit`, set `submitButton` to render a `type="submit"` button for an enclosing form. alert(v)} /> alert(v)} /> ); }`} >

### Submit lifecycle `status` and `progress` are fully controlled. While `status="loading"` the rainbow hides, the 3D depth locks in, and a progress bar runs along the bottom — determinate when you pass `progress`, otherwise an indeterminate segment bounces end to end. The arrow turns into a circular progress / spinner. `success` and `error` flash a green / red sweep with a check / X icon. {}} status="loading" /> {}} status="loading" progress={60} /> {}} status="success" /> {}} status="error" /> ); }`} >

You drive it from your submit handler: ```tsx const [status, setStatus] = useState("idle"); const [progress, setProgress] = useState(0); async function handleSubmit(value: string) { setStatus("loading"); try { await upload(value, setProgress); // call setProgress(0..100) as it runs setStatus("success"); } catch { setStatus("error"); } setTimeout(() => setStatus("idle"), 1600); } ; ``` ### Installation ### Usage ```tsx import { MagicInput } from "@/components/godui/magic-input"; ``` ```tsx ``` By default the input is flat and lifts into the 3D effect only while focused. Set `depth="always"` to keep the raised look at rest, and `rainbow={false}` to disable the animated rainbow edge. ```tsx ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `variant` | `"primary" \| "secondary"` | `"primary"` | 3D edge color scheme (visible when `rainbow={false}`) | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Input padding and text size | | `depth` | `"focus" \| "always"` | `"focus"` | Show the 3D depth only on focus, or always | | `rainbow` | `boolean` | `true` | Animate the edge and shadow with a rainbow gradient while focused | | `submitButton` | `boolean` | `false` | Show the arrow submit button (`type="submit"`) | | `onSubmit` | `(value: string) => void` | — | Fires with the value on click / Enter; also shows the button | | `submitLabel` | `string` | `"Submit"` | Accessible label for the submit button | | `status` | `"idle" \| "loading" \| "success" \| "error"` | `"idle"` | Submit lifecycle state | | `progress` | `number` | — | 0–100; makes `loading` determinate (omit for indeterminate) | --- # OTP Input Source: docs/components/inputs/otp-input.mdx > A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake. import { OTPInput } from "@godui/components"; console.log(code)} />; }`} > ### Masked Set `mask` to render entered characters as dots — useful for sensitive codes. ; }`} > ### Validation status `status="error"` shakes the row; `status="success"` settles it. Flip back to `idle` to re-arm the shake. ); }`} >

### Installation ### Usage ```tsx import { OTPInput } from "@godui/components"; verify(code)} />; ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `length` | `number` | `6` | Number of code cells. | | `value` | `string` | — | Controlled value. | | `defaultValue` | `string` | `""` | Uncontrolled initial value. | | `type` | `"numeric" \| "alphanumeric"` | `"numeric"` | Accepted characters. | | `mask` | `boolean` | `false` | Render characters as dots. | | `status` | `"idle" \| "error" \| "success"` | `"idle"` | Validation state. | | `disabled` | `boolean` | `false` | Disable input. | | `autoFocus` | `boolean` | `false` | Focus on mount. | | `onChange` | `(value: string) => void` | — | Fires on every change. | | `onComplete` | `(value: string) => void` | — | Fires when the last cell fills. | --- # Accordion Source: docs/components/layout/accordion.mdx > A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes. import { Accordion } from "@godui/components"; export const faqItems = [ { value: "what", title: "What is GodUI?", content: "A collection of animated React components built with Tailwind CSS and Framer Motion.", }, { value: "install", title: "How do I install a component?", content: "Use the shadcn CLI to add any component into your project.", }, { value: "license", title: "Is it free to use?", content: "Yes — copy, paste, and ship.", }, ]; ; }`} >

### Multiple open `type="multiple"` lets any number of panels stay open at once. ; }`} >

### Installation ### Usage ```tsx import { Accordion } from "@godui/components"; ; ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `items` | `AccordionItem[]` | — | `{ value, title, content, disabled? }`. | | `type` | `"single" \| "multiple"` | `"single"` | Open behavior. | | `defaultValue` | `string \| string[]` | — | Initially open value(s). | | `collapsible` | `boolean` | `true` | Allow closing the open panel in single mode. | --- # Animated Testimonials Source: docs/components/layout/animated-testimonials.mdx > A testimonial carousel with a shuffling image stack and crossfading quotes. import { AnimatedTestimonials } from "@godui/components"; export const demoTestimonials = [ { quote: "GodUI shipped the smoothest interactions I've put in production this year.", name: "Ada Lovelace", role: "Design Engineer, Analytical", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&q=80", }, { quote: "Spring physics out of the box. Everything just feels expensive.", name: "Grace Hopper", role: "Staff Engineer, Compiler Co.", src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&q=80", }, ]; ; }`} > ### Installation `AnimatedTestimonials` shuffles a stack of portraits while the quote reveals word-by-word and the name crossfades. It autoplays and exposes manual controls. ### Usage ```tsx import { AnimatedTestimonials } from "@/components/godui/animated-testimonials"; ``` ```tsx const testimonials = [ { quote: "…", name: "Ada Lovelace", role: "Design Engineer", src: "/ada.jpg" }, { quote: "…", name: "Grace Hopper", role: "Staff Engineer", src: "/grace.jpg" }, ]; ; ``` ### Props | Prop | Type | Default | Description | | -------------- | ---------------- | ------- | -------------------------------------- | | `testimonials` | `Testimonial[]` | — | Testimonials to cycle through. | | `autoplay` | `boolean` | `true` | Advance automatically. | | `interval` | `number` | `5000` | Autoplay interval in milliseconds. | Each `Testimonial` is `{ quote, name, role, src }`. The component also forwards every standard `
` attribute to the root element. --- # Avatar Group Source: docs/components/layout/avatar-group.mdx > Overlapping avatars that fan apart on hover, with a +N overflow chip. import { AvatarGroup } from "@godui/components"; export const people = [ { src: "https://i.pravatar.cc/80?img=1", alt: "Ada" }, { src: "https://i.pravatar.cc/80?img=2", alt: "Carl" }, { src: "https://i.pravatar.cc/80?img=3", alt: "Eve" }, { src: "https://i.pravatar.cc/80?img=4", alt: "Gus" }, { src: "https://i.pravatar.cc/80?img=5", alt: "Ivy" }, { src: "https://i.pravatar.cc/80?img=6", alt: "Jo" }, ]; ; }`} > ### Sizes
); }`} >

### Installation ### Usage ```tsx import { AvatarGroup } from "@godui/components"; ; ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `avatars` | `Avatar[]` | — | List of `{ src?, alt?, fallback?, href? }`. | | `max` | `number` | `4` | Max shown before the `+N` chip. | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Avatar size. | | `spreadOnHover` | `boolean` | `true` | Fan the stack apart on hover. | --- # Bento Grid Source: docs/components/layout/bento-grid.mdx > A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover. import { BentoGridDemo } from "@/components/demos/bento-grid-demo"; } title="Interfaces that feel alive" description="Spring-driven motion and pixel-tuned details, ready to drop in." /> } title="Realtime analytics" description="Every interaction streamed and charted as it happens." /> } title="Enterprise-grade" description="SOC 2 Type II, SSO, and audit logs out of the box." /> } title="120ms p95 globally" description="Served from 35 edge regions, close to every user." /> ); }`} > ### Installation `BentoGrid` lays out `BentoCard`s in a responsive grid. Cards stagger in with a spring as the grid scrolls into view, lift on hover, and reveal a pointer-tracked spotlight. ### Usage ```tsx import { BentoGrid, BentoCard } from "@/components/godui/bento-grid"; ``` ```tsx ``` Pass `icon`, `title`, `description`, and `cta` for the built-in layout, or drop in your own `children` for full control. ### Props #### BentoGrid | Prop | Type | Default | Description | | --------- | --------------- | ------- | ------------------------------------ | | `columns` | `2 \| 3 \| 4` | `3` | Number of columns on large screens. | #### BentoCard | Prop | Type | Default | Description | | ------------- | -------------- | ------- | ---------------------------------------- | | `colSpan` | `1 \| 2 \| 3` | `1` | Columns the card spans on large screens. | | `rowSpan` | `1 \| 2` | `1` | Rows the card spans on large screens. | | `icon` | `ReactNode` | — | Leading icon / media. | | `title` | `ReactNode` | — | Card heading. | | `description` | `ReactNode` | — | Supporting copy. | | `cta` | `ReactNode` | — | Call-to-action pinned to the bottom. | Both components forward every standard `
` attribute to their root element. --- # Card Swap Source: docs/components/layout/card-swap.mdx > A 3D stack of cards that cycles through a showcase loop, with pointer parallax and spring re-flow. import { CardSwap } from "@godui/components"; import { CardSwapDemo } from "@/components/demos/card-swap-demo"; A compact, eye-catching way to cycle product features or screens in a hero corner. Cards sit in a 3D perspective stack and spring to their new slot on each swap; the whole stack tilts toward your pointer. Hover to pause, or use the arrows. {features.map((f) => (

{f.title}

{f.body}

))} ); }`} > ### Installation Each card is assigned a rank in the stack; when the order rotates, every card springs to its new slot — scale, offset, and z-index all interpolate at once. The container reads the pointer position and tilts the whole stack in 3D for parallax depth. ### Usage ```tsx import { CardSwap } from "@/components/godui/card-swap"; ``` ```tsx One Two Three ``` Give the `CardSwap` a fixed size (`h-… w-…`); each card fills it. #### Manual only Set `interval={0}` to disable auto-advance and drive the stack with the arrows (or your own controls). ```tsx {/* cards */} ``` #### Tuning the stack ```tsx ``` ### Accessibility The previous/next controls are real buttons with labels. When `prefers-reduced-motion` is set, swaps are instant and the parallax tilt is disabled. ### Props | Prop | Type | Default | Description | | -------------- | --------- | -------- | ------------------------------------------------------ | | `interval` | `number` | `3500` | Auto-advance interval in ms. `0` disables it. | | `pauseOnHover` | `boolean` | `true` | Pause the auto-advance while the pointer is over it. | | `offsetY` | `number` | `28` | Vertical offset (px) between stacked cards. | | `offsetX` | `number` | `22` | Horizontal offset (px) between stacked cards. | | `scaleStep` | `number` | `0.06` | Scale removed per card going back. | `CardSwap` also forwards every standard `
` attribute to the root element. --- # Image Accordion Source: docs/components/layout/image-accordion.mdx > Horizontal image panels that expand on hover to reveal their caption — an elegant, space-efficient gallery. import { ImageAccordion } from "@godui/components"; import { ImageAccordionDemo } from "@/components/demos/image-accordion-demo"; An elegant way to show a handful of features or images in a single band. Hover or focus a panel and it eases wide while the others compress — the image saturates and zooms, and the caption slides up. Move across the panels below. ; }`} > ### Installation The active panel grows via an animated `flex-grow` while its neighbours compress in the same timeline — no layout jump. Idle panels show a compact vertical label; the active one reveals a full caption that slides up. ### Usage ```tsx import { ImageAccordion } from "@/components/godui/image-accordion"; ``` ```tsx ``` #### Links Give a panel an `href` to render it as an anchor. ```tsx ``` #### Tuning `activeGrow` sets how much wider the open panel becomes; `height` and `defaultIndex` control the band height and which panel starts open. ```tsx ``` ### Accessibility Each panel is a real button (or anchor) with `aria-expanded`. Tabbing focuses a panel and opens it, so the component is fully keyboard navigable. When `prefers-reduced-motion` is set, transitions are removed and panels switch instantly. ### Props | Prop | Type | Default | Description | | -------------- | ----------------------- | --------- | -------------------------------------------------------- | | `panels` | `ImageAccordionPanel[]` | — | Panels, left to right. 3–6 works best. | | `defaultIndex` | `number` | `0` | Index of the panel open by default. | | `activeGrow` | `number` | `5` | How much wider the active panel grows vs. the others. | | `height` | `string` | `"26rem"` | Height of the accordion (any CSS length). | Each `ImageAccordionPanel` has `image`, `title`, optional `description`, and optional `href`. --- # Image Compare Source: docs/components/layout/image-compare.mdx > A draggable before/after slider with clip-path reveal, keyboard support, and a pulsing handle hint. import { ImageCompareDemo, ImageCompareVerticalDemo } from "@/components/demos/image-compare-demo"; } after={} />
); }`} > ### Vertical } after={} />
); }`} > ### Installation ### Usage ```tsx import { ImageCompare } from "@godui/components"; } after={} />; ``` Drag the handle, or focus it and use the arrow keys (hold Shift for larger steps). ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `before` | `ReactNode` | — | Content revealed on the left/top. | | `after` | `ReactNode` | — | Base content underneath. | | `initial` | `number` | `50` | Starting handle position (0–100). | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Drag axis. | | `beforeLabel` | `string` | — | Badge over the before layer. | | `afterLabel` | `string` | — | Badge over the after layer. | | `onChange` | `(position: number) => void` | — | Fires as the handle moves. | --- # Progressive Card Reveal Source: docs/components/layout/progressive-card-reveal.mdx > A vertical stack of cards where one card expands to its full view while the rest collapse to compact pills, animating the morph between them. import { ProgressiveCardRevealDemo } from "@/components/demos/progressive-card-reveal-demo"; A vertical stack of cards. Exactly one card is expanded at a time — the rest collapse to compact pills. The parent owns which card is active; clicking a collapsed pill asks it to switch, and Framer Motion animates the size morph and crossfades the content. {legs.map((leg) => (
{leg.icon} {leg.label} {leg.meta}

{leg.icon} {leg.label}

Distance

{leg.distance}

Time

{leg.time}

))} ); }`} > ### Installation ### Usage ```tsx import { ProgressiveCardReveal } from "@/components/godui/progressive-card-reveal"; ``` `ProgressiveCardReveal` is a compound component. The root is **controlled** via `activeIndex` — keep it in state and update it from `onActiveChange`. Each `Card` declares two views with the `CardCollapsed` and `CardExpanded` slots; the card derives its index from its position, so you never pass an index manually. ```tsx const [active, setActive] = useState(0); Flight — ~3 hours {/* full content */} Driving — ~18 hours {/* full content */} ``` Clicking a collapsed card fires `onActiveChange(index)`. Clicking the already-expanded card is a no-op — one card stays open at all times. The transition respects `prefers-reduced-motion`, switching instantly when reduced motion is requested. ### Props #### ProgressiveCardReveal | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `activeIndex` | `number` | — | Index of the expanded card (controlled). | | `onActiveChange` | `(index: number) => void` | — | Fired when a collapsed card is activated. | | `maxDepth` | `number` | — | Caps how far collapsed cards narrow. Cards more than `maxDepth` steps from the active one all share the width at `maxDepth`. Omit for unbounded funneling. | Also accepts all `div` attributes (e.g. `className`). #### ProgressiveCardReveal.Card Accepts all `div` attributes. Children must be a `CardCollapsed` and a `CardExpanded` slot. #### ProgressiveCardReveal.CardCollapsed / CardExpanded Slot wrappers — their children are the collapsed (pill) and expanded views. --- # Reorder List Source: docs/components/layout/reorder-list.mdx > A drag-to-reorder list where items lift on grab, spring to place, and neighbours flow around them. import { ReorderList, ReorderItem } from "@godui/components"; import { ReorderListDemo } from "@/components/demos/reorder-list-demo"; {items.map((item) => ( {item.label} ))} ); }`} > ### Installation Built on Motion's drag-to-reorder primitives: grabbing an item lifts and scales it, and the rest of the list springs around it in real time. Works with pointer and touch, and the grab lift is skipped under `prefers-reduced-motion`. ### Usage ```tsx import { ReorderList, ReorderItem } from "@/components/godui/reorder-list"; ``` Hold `values` in state and pass the matching `setState` as `onReorder`. Each `ReorderItem` takes the `value` it represents — use a stable `key`. ```tsx {items.map((item) => ( {item.label} ))} ``` Set `axis="x"` for a horizontal list. ### Props #### ReorderList | Prop | Type | Default | Description | | ----------- | ----------------------- | ------- | ----------------------------------------- | | `values` | `T[]` | — | Ordered values rendered as items. | | `onReorder` | `(values: T[]) => void` | — | Called with the next order while dragging. | | `axis` | `"x" \| "y"` | `"y"` | Drag axis. | #### ReorderItem | Prop | Type | Default | Description | | ------- | ---- | ------- | ---------------------------------------------------- | | `value` | `T` | — | The value this item represents within `values`. | Both components forward every standard attribute to their underlying `
` / `
`. --- # Scroll Stack Source: docs/components/layout/scroll-stack.mdx > Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section. import { ScrollStack } from "@godui/components"; import { ScrollStackDemo } from "@/components/demos/scroll-stack-demo"; Each card pins to the top of the scroller while the next one rises over it. As a card is buried it eases down to a smaller scale, dims, and blurs — so depth reads even on a flat stack. Scroll the frame below. {cards.map((c) => (

{c.eyebrow}

{c.title}

{c.body}

))} ); }`} > ### Installation `ScrollStack` drives every card from a single scroll progress value. There is no scroll-jacking — the cards are plain `position: sticky` elements, and the scale, brightness, and blur are interpolated from how far each card has been buried. ### Usage ```tsx import { ScrollStack } from "@/components/godui/scroll-stack"; ``` By default the stack tracks the **page** scroll — the right choice for a full landing-page section. Each card occupies one viewport of scroll distance. ```tsx First Second Third ``` #### Self-contained scroller Pass `height` to make the stack its own scroll viewport — useful inside a bounded region rather than the whole page. ```tsx {/* cards */} ``` #### Tuning the depth ```tsx ``` ### Accessibility When `prefers-reduced-motion` is set, `ScrollStack` renders the cards as a plain vertical list — no pinning, scaling, or blur. ### Props | Prop | Type | Default | Description | | ----------- | --------- | --------- | --------------------------------------------------------------------------- | | `height` | `string` | — | When set, the stack becomes its own scroll viewport of this height. | | `baseScale` | `number` | `0.86` | Scale of the most-buried card at the back of the stack. | | `peek` | `number` | `16` | How far (px) each stacked card peeks below the one in front of it. | | `blur` | `boolean` | `true` | Blur buried cards as they recede. | | `pinTop` | `string` | `"12vh"` | Distance from the top of the scroller where cards pin. | `ScrollStack` also forwards every standard `
` attribute to the root element. --- # Stepper Source: docs/components/layout/stepper.mdx > A step indicator with a spring-filled progress line and a number-to-checkmark morph. import { Stepper } from "@godui/components"; import { StepperInteractiveDemo } from "@/components/demos/stepper-demo"; export const onboarding = [ { label: "Account", description: "Email & password" }, { label: "Profile", description: "Name & avatar" }, { label: "Workspace", description: "Invite your team" }, { label: "Done", description: "All set" }, ]; ; }`} >

### Interactive Drive `active` from state to walk through the steps — the line fills and each completed step morphs its number into a checkmark.

); }`} > ### Vertical ; }`} > ### Installation ### Usage ```tsx import { Stepper } from "@godui/components"; ; ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `steps` | `Step[]` | — | `{ label, description? }`. | | `active` | `number` | — | Zero-based current step; earlier steps render complete. | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction. | --- # Swipe Deck Source: docs/components/layout/swipe-deck.mdx > A physics, Tinder-style swipeable card deck with throw-to-dismiss, directional intent, and keyboard controls. import { SwipeDeck } from "@godui/components"; import { SwipeDeckDemo } from "@/components/demos/swipe-deck-demo"; A tactile way to page through profiles, testimonials, or onboarding screens. Drag the top card — it rotates with the throw and tints toward your intent; release past the threshold and it flies off while the next card springs forward. Drag, use the buttons, or the arrow keys. console.log(i, dir)}> ); }`} > ### Installation The front card is a draggable spring; its rotation is mapped from the drag distance and the intent badges fade in as you pass a small offset. A release past `threshold` — or a fast enough flick — dismisses it with momentum, and the deck behind springs up a rank. ### Usage ```tsx import { SwipeDeck } from "@/components/godui/swipe-deck"; ``` ```tsx save(index, direction)}> One Two Three ``` #### Looping With `loop`, swiped cards are re-appended so the deck never empties — handy for testimonial reels. ```tsx {/* cards */} ``` #### Custom action labels ```tsx {/* cards */} ``` ### Accessibility The deck is a focusable group: ← and → swipe, and the labelled buttons below do the same. When `prefers-reduced-motion` is set, the spring settling is removed. ### Props | Prop | Type | Default | Description | | ----------- | ------------------------------------------- | ------- | -------------------------------------------------------- | | `onSwipe` | `(index: number, dir: SwipeDirection) => void` | — | Fired when the front card is swiped away. | | `loop` | `boolean` | `false` | Re-append swiped cards so the deck never empties. | | `threshold` | `number` | `120` | Drag distance (px) past which a release dismisses. | | `actions` | `{ left: string; right: string }` | — | Labels for the left/right actions and intent badges. | `SwipeDeck` also forwards every standard `
` attribute to the root element. --- # Tilt Card Source: docs/components/layout/tilt-card.mdx > A card that tilts in 3D toward the pointer with parallax depth and a specular glare. import { TiltCard } from "@godui/components"; import { TiltCardDemo } from "@/components/demos/tilt-card-demo";
Designed in 3D

Move your pointer across the card — it tilts toward you with parallax depth and a glare that tracks the cursor.
); }`} > ### Installation The pointer position is normalized over the card and spring-mapped to `rotateX` and `rotateY` on a `perspective` container. The content layer floats toward the viewer by `depth` for parallax, and a radial glare follows the cursor. It eases back to flat on leave, and renders as a plain static card under `prefers-reduced-motion`. ### Usage ```tsx import { TiltCard } from "@/components/godui/tilt-card"; ``` ```tsx
Title

Body copy
``` #### Stronger tilt and depth
Deeper parallax

Crank maxTilt and depth for a more dramatic effect.
`} >
Deeper parallax

Crank maxTilt and depth for a more dramatic effect.
### Props | Prop | Type | Default | Description | | --------- | --------- | ------- | ---------------------------------------------------- | | `maxTilt` | `number` | `12` | Maximum tilt in degrees toward the pointer. | | `scale` | `number` | `1.03` | Hover scale applied to the whole card. | | `depth` | `number` | `40` | Float the content layer toward the viewer (px). | | `glare` | `boolean` | `true` | Render a specular glare that follows the pointer. | `TiltCard` also forwards every standard `
` attribute to the root element. --- # Breadcrumbs Source: docs/components/navigation/breadcrumbs.mdx > A breadcrumb trail with a shared-element hover pill that springs between crumbs, animated path changes, and an overflow that collapses into a popover. import { BreadcrumbsDemo, BreadcrumbsCollapsedDemo } from "@/components/demos/breadcrumbs-demo"; }, { label: "Workspace", href: "#", icon: }, { label: "Settings", href: "#", icon: }, { label: "Billing", icon: }, ]; export function BreadcrumbsDemo() { return ; }`} > ### Installation ### Usage ```tsx import { Breadcrumbs } from "@/components/godui/breadcrumbs"; ``` ```tsx const items = [ { label: "Home", href: "/" }, { label: "Library", href: "/library" }, { label: "Current" }, ]; ; ``` Hovering crumbs slides a shared pill; the last crumb is marked as the current page. ### Examples #### Collapsed overflow Pass `maxItems` to fold the middle into a `…` button that springs open into a popover. ; }`} > ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `items` | `BreadcrumbItem[]` | — | Crumbs: `{ label, href?, icon? }` | | `maxItems` | `number` | `0` | Collapse the middle past this count (0 = never) | | `separator` | `ReactNode` | chevron | Node rendered between crumbs | | `collapsible` | `boolean` | `true` | Allow the collapsed middle to expand | | `onNavigate` | `(href: string) => void` | — | Called on crumb click (prevents default) | --- # Combobox Source: docs/components/navigation/combobox.mdx > A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state. import { ComboboxDemo, ComboboxAsyncDemo } from "@/components/demos/combobox-demo"; ; }`} > ### Installation ### Usage ```tsx import { Combobox } from "@/components/godui/combobox"; ``` ```tsx const [value, setValue] = useState(""); ; ``` ### Examples #### Async search Pass `onSearch` to resolve options for a query — it debounces input and shows a loading state while results arrive. { const res = await fetch(\`/api/search?q=\${q}\`); return res.json(); }} /> ); }`} > ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `options` | `ComboboxOption[]` | — | Static options (`{ label, value, description? }`) | | `onSearch` | `(query) => Promise` | — | Async resolver (overrides `options`) | | `value` | `string` | — | Controlled selected value | | `defaultValue` | `string` | `""` | Uncontrolled initial value | | `placeholder` | `string` | `"Search…"` | Input placeholder | | `emptyMessage` | `string` | `"No results"` | Shown when nothing matches | | `onChange` | `(value, option) => void` | — | Called on selection | --- # Context Menu Source: docs/components/navigation/context-menu.mdx > A right-click menu that springs open from the exact cursor point and flips to stay inside the viewport, with icons, shortcuts, and destructive actions. import { ContextMenuDemo } from "@/components/demos/context-menu-demo"; , shortcut: "↵", onSelect: () => setLast("Open") }, { label: "Rename", icon: , shortcut: "⌘R", onSelect: () => setLast("Rename") }, { type: "separator" }, { label: "Copy link", icon: , shortcut: "⌘C", onSelect: () => setLast("Copy") }, { label: "Share", icon: , onSelect: () => setLast("Share") }, { type: "separator" }, { label: "Delete", icon: , destructive: true, shortcut: "⌫", onSelect: () => setLast("Delete") }, ]; return (
Right-click here
); }`} > ### Installation ### Usage ```tsx import { ContextMenu } from "@/components/godui/context-menu"; ``` ```tsx const items = [ { label: "Copy", shortcut: "⌘C", onSelect: () => {} }, { type: "separator" }, { label: "Delete", destructive: true, onSelect: () => {} }, ]; ; ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `items` | `ContextMenuItem[]` | — | Items, separators, and labels | | `children` | `ReactNode` | — | The area that responds to right-click | --- # Dock Source: docs/components/navigation/dock.mdx > A macOS-style dock whose items magnify with spring physics as the pointer moves across them. import { DockDemo } from "@/components/demos/dock-demo"; {items.map(({ label, color, Icon }) => ( ))} ); }`} > ### Installation `Dock` tracks the pointer and magnifies each `DockItem` based on its distance from the cursor, using a spring (`mass 0.1`, `stiffness 170`, `damping 12`) so neighbors ripple smoothly. Labels appear above the hovered item. ### Usage ```tsx import { Dock, DockItem } from "@/components/godui/dock"; ``` ```tsx ``` #### Tuning the magnification ```tsx ``` ### Props #### Dock | Prop | Type | Default | Description | | --------------- | -------- | ------- | ---------------------------------------------------- | | `baseSize` | `number` | `44` | Resting size of each item in pixels. | | `magnification` | `number` | `72` | Maximum magnified size in pixels at the pointer. | | `distance` | `number` | `140` | Pointer distance over which items are affected. | #### DockItem | Prop | Type | Default | Description | | ------- | ----------- | ------- | -------------------------------------- | | `label` | `ReactNode` | — | Label shown above the item on hover. | Both components forward every standard `
` attribute to their root element. `DockItem` must be rendered inside a `Dock`. --- # Dropdown Menu Source: docs/components/navigation/dropdown-menu.mdx > An accessible dropdown that springs open from its trigger edge, with submenus, icons, shortcuts, separators, and full keyboard navigation. import { DropdownMenuDemo } from "@/components/demos/dropdown-menu-demo"; , shortcut: "⌘P", onSelect: () => setLast("Profile") }, { label: "Billing", icon: , onSelect: () => setLast("Billing") }, { label: "Switch workspace", icon: , submenu: [ { label: "Northwind", onSelect: () => setLast("Northwind") }, { label: "Acme Inc.", onSelect: () => setLast("Acme Inc.") }, { type: "separator" }, { label: "New workspace", icon: , onSelect: () => setLast("New") }, ], }, { type: "separator" }, { label: "Log out", icon: , onSelect: () => setLast("Log out") }, ]; return Ada Lovelace} items={items} />; }`} > ### Installation ### Usage ```tsx import { DropdownMenu } from "@/components/godui/dropdown-menu"; ``` ```tsx const items = [ { label: "Profile", onSelect: () => {} }, { label: "Workspaces", submenu: [{ label: "GodUI", onSelect: () => {} }] }, { type: "separator" }, { label: "Log out", onSelect: () => {} }, ]; Open} items={items} side="bottom" align="start" />; ``` Items can be `{ type: "separator" }`, `{ type: "label", label }`, or an action with `label`, optional `icon`, `shortcut`, `href`, `disabled`, `onSelect`, or a nested `submenu`. ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `trigger` | `ReactNode` | — | Element that toggles the menu | | `items` | `DropdownMenuItem[]` | — | Menu items, separators, labels, submenus | | `side` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Panel side | | `align` | `"start" \| "center" \| "end"` | `"start"` | Panel alignment | --- # Filter Bar Source: docs/components/navigation/filter-bar.mdx > A faceted filter bar with searchable multi-select popovers, count badges, and selections that spring inline into each facet pill. import { FilterBarDemo } from "@/components/demos/filter-bar-demo"; ; }`} > ### Installation ### Usage ```tsx import { FilterBar } from "@/components/godui/filter-bar"; ``` ```tsx const facets = [ { id: "status", label: "Status", options: [{ label: "Open", value: "open", count: 12 }], }, ]; const [value, setValue] = useState({}); ; ``` `value` is a `Record`. Each facet pill shows its current selection inline (`Status: Open +2`) and clears with the inline `×`. ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `facets` | `Facet[]` | — | `{ id, label, options: { label, value, count? }[] }` | | `value` | `Record` | — | Controlled selection | | `defaultValue` | `Record` | `{}` | Uncontrolled initial selection | | `onChange` | `(value) => void` | — | Called when the selection changes | | `searchable` | `boolean` | `true` | Show a search box in each popover | | `showCounts` | `boolean` | `true` | Show option count badges | --- # Magic Tab Source: docs/components/navigation/magic-tab.mdx > A segmented tab bar where the selected option lifts into a 3D button with an optional rainbow edge. import { MagicTab } from "@godui/components"; ; }`} > ### Installation ### Usage ```tsx import { MagicTab } from "@/components/godui/magic-tab"; ``` ```tsx const items = [ { value: "overview", label: "Overview" }, { value: "analytics", label: "Analytics" }, { value: "reports", label: "Reports" }, ]; ; ``` Use it controlled by passing `value` and `onValueChange`: ```tsx const [value, setValue] = useState("overview"); ; ``` ### Examples #### Secondary ; }`} > #### Without rainbow ; }`} > #### Disabled tab Mark any item `disabled` to skip it. ; }`} > #### Sizes
); }`} >

### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `items` | `MagicTabItem[]` | — | Tabs to render: `{ value, label, disabled? }` | | `value` | `string` | — | Controlled selected value | | `defaultValue` | `string` | first enabled item | Uncontrolled initial value | | `onValueChange` | `(value: string) => void` | — | Called when the selected tab changes | | `variant` | `"default" \| "secondary"` | `"default"` | Selected-tab color scheme | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Tab padding and text size | | `rainbow` | `boolean` | `true` | Animate the selected tab's 3D edge and shadow with a rainbow gradient | --- # Mega Menu Source: docs/components/navigation/mega-menu.mdx > A Vercel-style navigation menu with a direction-aware highlight and a panel that springs and height-morphs between triggers. import { MegaMenuDemo } from "@/components/demos/mega-menu-demo"; }, { label: "Deploy", href: "#deploy", description: "Global edge", icon: }, ], }, ], }, { label: "Resources", sections: [ { links: [ { label: "Docs", href: "#docs", description: "Guides and reference", icon: }, { label: "Changelog", href: "#changelog", description: "What shipped", icon: }, ], }, ], }, { label: "Pricing", href: "#pricing" }, ]; export function MegaMenuDemo() { return ; }`} > ### Installation ### Usage ```tsx import { MegaMenu } from "@/components/godui/mega-menu"; ``` ```tsx const items = [ { label: "Product", sections: [ { heading: "Build", links: [{ label: "Editor", href: "/editor", description: "Write code" }], }, ], }, { label: "Pricing", href: "/pricing" }, ]; ; ``` Items with `sections` open a panel on hover; items with only `href` render as plain links. Hovering between triggers slides a shared highlight and morphs the panel height. ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `items` | `MegaMenuItem[]` | — | Triggers: `{ label, href?, sections? }` | | `openDelay` | `number` | `80` | Delay (ms) before opening on hover | | `closeDelay` | `number` | `140` | Delay (ms) before closing after leaving | | `onNavigate` | `(href: string) => void` | — | Called on link click (prevents default) | --- # Resizable Header Source: docs/components/navigation/resizable-header.mdx > A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator. import { ResizableHeaderDemo } from "@/components/demos/resizable-header-demo"; Start free } /> ); }`} > ### Installation ### Usage ```tsx import { ResizableHeader } from "@/components/godui/resizable-header"; ``` ```tsx const links = [ { label: "Product", href: "/product" }, { label: "Pricing", href: "/pricing" }, { label: "Docs", href: "/docs" }, ]; ; ``` By default the header tracks window scroll. To track a scroll container instead (as in the preview above), pass a `scrollRef`: ```tsx const scrollRef = useRef(null);
{/* content */}
; ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `logo` | `ReactNode` | `"GodUI"` | Brand mark on the left | | `links` | `HeaderLink[]` | `[]` | Navigation links: `{ label, href }` | | `activeHref` | `string` | — | `href` of the active link | | `cta` | `ReactNode` | — | Call-to-action node on the right | | `scrollThreshold` | `number` | `24` | Scroll px before the bar morphs to a pill | | `sticky` | `boolean` | `true` | Stick the header to the top | | `scrollRef` | `RefObject` | — | Scroll container to track (defaults to window) | | `onNavigate` | `(href: string) => void` | — | Called on link click (prevents default) | --- # Segmented Control Source: docs/components/navigation/segmented-control.mdx > An iOS-style selector with a sliding pill that springs between options. import { SegmentedControl } from "@godui/components"; export const viewOptions = [ { label: "Day", value: "day" }, { label: "Week", value: "week" }, { label: "Month", value: "month" }, ]; ; }`} > ### Sizes
); }`} >

### Installation ### Usage ```tsx import { SegmentedControl } from "@godui/components"; const [view, setView] = useState("week"); ; ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `options` | `SegmentedOption[]` | — | `{ label, value, icon?, disabled? }`. | | `value` | `string` | — | Controlled value. | | `defaultValue` | `string` | first option | Uncontrolled value. | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Control size. | | `onChange` | `(value: string) => void` | — | Fires on selection. | --- # Tab Bar Source: docs/components/navigation/tab-bar.mdx > A mobile bottom navigation where a shared-element blob slides under the active tab, the icon gives a haptic-style pop, and the label reveals on selection. import { TabBarDemo } from "@/components/demos/tab-bar-demo"; }, { value: "search", label: "Search", icon: }, { value: "alerts", label: "Alerts", icon: , badge: 5 }, { value: "profile", label: "Profile", icon: }, ]; export function BottomNav() { const [tab, setTab] = useState("home"); return ; }`} > ### Installation ### Usage ```tsx import { TabBar } from "@/components/godui/tab-bar"; ``` ```tsx const [tab, setTab] = useState("home"); ; ``` Pass `safeArea` to add bottom safe-area padding for devices with a home indicator. ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `tabs` | `TabBarTab[]` | — | `{ value, label, icon, badge? }` | | `value` | `string` | — | Controlled active tab | | `defaultValue` | `string` | first tab | Uncontrolled initial tab | | `labelsOnActiveOnly` | `boolean` | `true` | Reveal the label only on the active tab | | `safeArea` | `boolean` | `false` | Add bottom safe-area padding | | `onChange` | `(value: string) => void` | — | Called when the active tab changes | --- # Animated Tooltip Source: docs/components/overlays/animated-tooltip.mdx > A tooltip that springs in and tilts in 3D as the pointer moves across its trigger. import { AnimatedTooltipDemo } from "@/components/demos/animated-tooltip-demo"; {team.map((m) => ( {m.name}{m.role}} > {m.initials} ))}
); }`} > ### Installation `AnimatedTooltip` wraps any trigger. On hover or focus the tooltip springs in and tilts toward the pointer in 3D, following the cursor across the trigger. ### Usage ```tsx import { AnimatedTooltip } from "@/components/godui/animated-tooltip"; ``` ```tsx ``` #### Side ```tsx ``` ### Props | Prop | Type | Default | Description | | --------- | -------------------- | ------- | -------------------------------------------- | | `content` | `ReactNode` | — | Tooltip content shown on hover / focus. | | `side` | `"top" \| "bottom"` | `"top"` | Which side of the trigger the tooltip shows. | | `children`| `ReactNode` | — | The trigger the tooltip is attached to. | `AnimatedTooltip` also forwards every standard `` attribute to the root element. --- # Command Palette Source: docs/components/overlays/command-palette.mdx > A ⌘K command menu with fuzzy filtering, keyboard navigation, and spring enter / exit. import { CommandPaletteDemo } from "@/components/demos/command-palette-demo"; ); }`} > ### Installation `CommandPalette` is a controlled, portalled ⌘K menu. It filters as you type, moves the active highlight with a spring (`layoutId`), and supports `↑` `↓` to navigate, `Enter` to select, and `Escape` to close. With `enableShortcut` it toggles on ⌘K / Ctrl+K. ### Usage ```tsx "use client"; import { CommandPalette } from "@/components/godui/command-palette"; import { useState } from "react"; const groups = [ { heading: "Navigation", items: [ { id: "home", label: "Go to Home", shortcut: "G H", onSelect: () => navigate("/") }, { id: "docs", label: "Search Docs", keywords: ["help"] }, ], }, ]; export function Example() { const [open, setOpen] = useState(false); return ; } ``` ### Props | Prop | Type | Default | Description | | ---------------- | -------------------------- | ---------------------------------- | ------------------------------------ | | `open` | `boolean` | — | Controlled open state. | | `onOpenChange` | `(open: boolean) => void` | — | Called when the palette opens/closes.| | `groups` | `CommandGroup[]` | — | Grouped commands to show. | | `placeholder` | `string` | `"Type a command or search…"` | Input placeholder. | | `enableShortcut` | `boolean` | `true` | Toggle with ⌘K / Ctrl+K. | A `CommandItem` is `{ id, label, icon?, shortcut?, keywords?, onSelect? }`; a `CommandGroup` is `{ heading?, items }`. --- # Drawer Source: docs/components/overlays/drawer.mdx > A draggable bottom sheet with rubber-band physics, snap points, and flick-to-dismiss. import { DrawerDemo } from "@/components/demos/drawer-demo"; import { DrawerBottomDemo } from "@/components/demos/drawer-bottom-demo";
{lines.map((item) => (
{item.name} {item.price}
))}
); }`} > ### Installation `Drawer` is a controlled, portalled sheet. Drag the handle down (or flick) past the threshold to dismiss; it also closes on scrim click and `Escape`, and locks body scroll while open. Use `side="right"` for a side panel. ### Usage ```tsx "use client"; import { Drawer } from "@/components/godui/drawer"; import { useState } from "react"; export function Example() { const [open, setOpen] = useState(false); return ( <>
Drawer content
); } ``` ### Examples #### Bottom sheet Set `side="bottom"` for a mobile-style sheet — drag the handle (or flick) down to dismiss. Great for share menus, quick actions, and confirmations. …`}> ### Props | Prop | Type | Default | Description | | -------------- | -------------------------- | ---------- | ---------------------------------------- | | `open` | `boolean` | — | Controlled open state. | | `onOpenChange` | `(open: boolean) => void` | — | Called when the drawer opens or closes. | | `side` | `"bottom" \| "right"` | `"bottom"` | Side the drawer slides in from. | | `title` | `ReactNode` | — | Accessible title rendered at the top. | | `className` | `string` | — | Extra classes for the panel. | --- # Dynamic Island Source: docs/components/overlays/dynamic-island.mdx > An Apple-inspired pill that springs between size presets while its content cross-fades. import { DynamicIsland } from "@godui/components"; import { DynamicIslandDemo } from "@/components/demos/dynamic-island-demo"; {/* render content per size */} ); }`} > ### Installation The shell animates its `width`, `height`, and `borderRadius` between presets with an underdamped spring for the signature rubbery overshoot. Change `presenceKey` (or `size`) and the inner view cross-fades with a scale-and-blur transition. The spring is skipped under `prefers-reduced-motion`. ### Usage ```tsx import { DynamicIsland } from "@/components/godui/dynamic-island"; ``` ```tsx ``` Drive `size` and `presenceKey` from state to morph between views. Size presets: `compact`, `default`, `long`, `tall`, and `large`. ### Props | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------ | ----------- | ------------------------------------------------- | | `size` | `"compact" \| "default" \| "long" \| "tall" \| "large"` | `"default"` | Shape preset the island morphs to. | | `presenceKey` | `React.Key` | `size` | Identity of the current content; change to cross-fade. | `DynamicIsland` also forwards every standard `
` attribute to the root element. --- # Floating Toolbar Source: docs/components/overlays/floating-toolbar.mdx > A context toolbar that springs into view with magnetic, morphing action buttons. import { FloatingToolbar } from "@godui/components"; export const icon = (d) => ( ); export const toolbarActions = [ { icon: icon("M6 12h12M6 6h12M6 18h12"), label: "Align", active: true }, { icon: icon("M4 7V4h16v3M9 20h6M12 4v16"), label: "Text" }, { icon: icon("M21 15l-5-5L5 21"), label: "Image" }, { icon: icon("M3 6h18M3 12h18M3 18h18"), label: "List" }, ]; , label: "Align", active: true }, { icon: , label: "Text" }, { icon: , label: "Image" }, ]} /> ); }`} > ### Installation ### Usage Drive `open` from a selection or hover state to spring the toolbar in and out. ```tsx import { FloatingToolbar } from "@godui/components"; const [open, setOpen] = useState(false); , label: "Bold", onClick: bold }]} />; ``` ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `actions` | `ToolbarAction[]` | — | `{ icon, label, onClick?, active?, disabled? }`. | | `open` | `boolean` | `true` | Mount/unmount with a spring entrance. | | `children` | `ReactNode` | — | Trailing content (dividers, extra controls). | --- # Morphing Dialog Source: docs/components/overlays/morphing-dialog.mdx > A card that physically morphs into a modal through a shared layout, then springs back on close. import { MorphingDialog, MorphingDialogTrigger, MorphingDialogContent, MorphingDialogClose, } from "@godui/components"; import { MorphingDialogDemo } from "@/components/demos/morphing-dialog-demo";
Aurora Sessions

Aurora Sessions
); }`} > ### Installation The trigger and content share a `layoutId`, so opening the dialog morphs the card into the modal with an underdamped spring and a blurred backdrop fade — and reverses on close. Escape and backdrop clicks dismiss it, body scroll locks while open, and the spring is skipped under `prefers-reduced-motion`. ### Usage ```tsx import { MorphingDialog, MorphingDialogTrigger, MorphingDialogContent, MorphingDialogClose, } from "@/components/godui/morphing-dialog"; ``` Wrap a trigger and content in a single `MorphingDialog`. It's uncontrolled by default; pass `open` / `onOpenChange` to control it. ```tsx {/* collapsed card */} {/* expanded view */} ``` ### Props #### MorphingDialog | Prop | Type | Default | Description | | -------------- | ------------------------- | ------- | ---------------------------------------- | | `open` | `boolean` | — | Controlled open state. | | `onOpenChange` | `(open: boolean) => void` | — | Called whenever the open state changes. | `MorphingDialogTrigger`, `MorphingDialogContent`, and `MorphingDialogClose` forward every standard attribute to their root element. The trigger and content must share one `MorphingDialog` parent so they animate as a pair. --- # Toast Source: docs/components/overlays/toast.mdx > Stacked, swipe-dismissible toasts with an imperative toast() API. import { ToastDemo } from "@/components/demos/toast-demo";
); }`} > ### Installation Render a single `` near the root of your app, then call `toast()` from anywhere. Toasts spring in, auto-dismiss, pause on hover, and can be swiped away. ### Usage ```tsx // app/layout.tsx import { ToastProvider } from "@/components/godui/toast"; export default function RootLayout({ children }) { return ( {children} ); } ``` ```tsx "use client"; import { toast } from "@/components/godui/toast"; toast({ title: "Event created", description: "Friday at 5pm" }); toast.success({ title: "Saved" }); toast.error({ title: "Something went wrong" }); ``` #### With an action ```tsx toast({ title: "Deleted file", description: "report.pdf", action: { label: "Undo", onClick: restore }, }); ``` ### API #### `ToastProvider` | Prop | Type | Default | Description | | ---------- | --------------- | ---------------- | --------------------------------- | | `position` | `ToastPosition` | `"bottom-right"` | Corner the stack is anchored to. | | `duration` | `number` | `4000` | Default auto-dismiss delay in ms. | #### `toast(options)` Returns the toast `id`. `toast.success` and `toast.error` set the variant; `toast.dismiss(id)` removes one early. `options` is `{ title?, description?, variant?, duration?, action? }`. --- # Aurora Text Source: docs/components/text/aurora-text.mdx > Gradient text with a rainbow aurora that drifts across the letters. import { AuroraText } from "@godui/components"; Ship beautiful UI ); }`} >
Ship beautiful UI
### Installation AuroraText clips an animated gradient to the text via `background-clip: text`. The animation is CSS-only and respects `prefers-reduced-motion` — no font or JavaScript animation dependency required. ### Usage ```tsx import { AuroraText } from "@/components/godui/aurora-text"; ``` `AuroraText` is an inline ``, so it inherits the surrounding font size and weight. Wrap it inside a heading and style that parent: ```tsx
Ship beautiful UI
``` #### Custom colors Pass any list of CSS colors. The aurora loops back to the first stop for a seamless cycle, so two or three colors are enough. ```tsx Sunset ``` #### Speed `speed` is a multiplier — `1` is roughly a 10s cycle, higher is faster. ```tsx Lightspeed ``` ### Props | Prop | Type | Default | Description | | ---------- | ---------- | ------------------ | -------------------------------------------------------- | | `children` | `ReactNode`| — | Text to render with the aurora gradient. | | `colors` | `string[]` | Rainbow spectrum | Gradient stops the aurora cycles through. | | `speed` | `number` | `1` | Speed multiplier; `1` ≈ 10s per cycle, higher is faster. | `AuroraText` also forwards every standard `` attribute (`className`, `style`, `id`, …) to the root element. --- # Elastic Text Source: docs/components/text/elastic-text.mdx > Variable-font text whose weight springs up under an automatic spotlight or the pointer. import { ElasticText } from "@godui/components"; Design for Humans ); }`} > Design for Humans ### Installation ElasticText animates the `wght` axis of your theme's sans font (`--font-sans`). With a variable font like [Geist](https://vercel.com/font) the weight sweeps smoothly; on a non-variable font it steps to the nearest available weight. No extra font dependency required. ### Usage ```tsx import { ElasticText } from "@/components/godui/elastic-text"; ``` #### Auto (default) A spotlight sweeps across the text on its own, springing each character's weight up as it passes. ```tsx Design for Humans ``` By default the spotlight loops forever. Set `loop={false}` to run a single sweep out and back to rest: ```tsx Plays once ``` #### Hover The weight emphasis follows the pointer while it's over the text. ```tsx Move Your Mouse ``` ### Examples #### Hover `mode="hover"` ties the weight emphasis to the pointer instead of an automatic spotlight. Move Your Mouse ); }`} > Move Your Mouse #### Plays once `loop={false}` runs a single spotlight sweep across the text, then settles back to normal weight. Use the replay button to run it again. Plays once ); }`} > Plays once ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `children` | `ReactNode` | — | Text content to animate | | `mode` | `"auto" \| "hover"` | `"auto"` | `auto` self-sweeps a spotlight; `hover` follows the pointer | | `minWeight` | `number` | `300` | Resting (lightest) font weight | | `maxWeight` | `number` | `900` | Peak (heaviest) weight under the spotlight / pointer | | `duration` | `number` | `2` | Seconds for one full `auto` sweep | | `loop` | `boolean` | `true` | Repeat the `auto` sweep | | `startOnView` | `boolean` | `true` | Start the `auto` sweep only once the text scrolls into view | | `radius` | `number` | `120` | Pointer influence radius in px (`hover` mode) | ### Accessibility When `prefers-reduced-motion` is enabled, the animation is disabled and the text renders statically at `minWeight`. --- # Highlighter Source: docs/components/text/highlighter.mdx > Draw hand-drawn sketch annotations over inline text — highlight, underline, box, circle, and more. Powered by Rough Notation. import { Highlighter } from "@godui/components"; Draw hand-drawn sketch annotations over inline text, powered by [Rough Notation](https://roughnotation.com/). highlight{" "} underline{" "} box{" "} circle{" "} strike-through{" "} crossed-off{" "} bracket
); }`} >
highlight{" "} underline{" "} box{" "} circle{" "} strike-through{" "} crossed-off{" "} bracket
### Installation `Highlighter` draws its sketch annotations with [`rough-notation`](https://github.com/linktohack/rough-notation) and uses `framer-motion` for the optional in-view trigger. Both are peer dependencies: ```bash npm install rough-notation framer-motion ``` ### Usage ```tsx import { Highlighter } from "@/components/godui/highlighter"; ``` Wrap any inline text. The annotation is drawn over the element on mount. ```tsx
The quick brown fox jumps over the lazy dog.
``` #### Actions ```tsx highlight underline box circle strike-through crossed-off bracket ``` The `highlight` action paints a pale marker behind the text and renders it in dark ink — like a real highlighter pen — so it stays legible in both light and dark mode. The other actions draw around the text and keep the inherited color. #### Animate on scroll Set `isView` to defer the draw-in animation until the element scrolls into view. ```tsx Reveals as you scroll ``` #### Tuning the sketch ```tsx Bolder, looser, slower ``` ### Examples #### In a sentence Drop it around any inline word — the sketch draws over the text in place. The quick brown fox{" "} jumps over the lazy dog.
); }`} >
The quick brown fox jumps over the lazy dog.
#### Tuning the sketch Push `strokeWidth`, `iterations`, `padding`, and `animationDuration` for a bolder, looser, slower draw. Bolder, looser, slower
); }`} >
Bolder, looser, slower
### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `children` | `ReactNode` | — | Inline text to annotate | | `action` | `"highlight" \| "underline" \| "box" \| "circle" \| "strike-through" \| "crossed-off" \| "bracket"` | `"highlight"` | Annotation style | | `color` | `string` | `"#ffd1dc"` | Annotation color (any CSS color string) | | `strokeWidth` | `number` | `1.5` | Stroke width of the annotation | | `animationDuration` | `number` | `600` | Draw-in animation duration in milliseconds | | `iterations` | `number` | `2` | Number of sketch passes (higher = more hand-drawn) | | `padding` | `number` | `2` | Gap between the text and the annotation | | `multiline` | `boolean` | `true` | Allow the annotation to wrap across lines | | `isView` | `boolean` | `false` | Defer the animation until scrolled into view | ### Accessibility The annotation is a decorative SVG overlay; it does not alter the text content, so the underlying text remains fully readable and selectable by screen readers. --- # Number Ticker Source: docs/components/text/number-ticker.mdx > Animates a number to its target value with spring physics when scrolled into view. import { NumberTicker } from "@godui/components"; ); }`} > ### Installation `NumberTicker` animates only once, when it scrolls into view. It renders `tabular-nums` so the width stays stable while the digits change. ### Usage ```tsx import { NumberTicker } from "@/components/godui/number-ticker"; ``` `NumberTicker` is an inline `` that inherits the surrounding font size, weight, and color. Style the element directly: ```tsx ``` #### Decimal places ```tsx ``` #### Count down Set `direction="down"` to count from `value` to `startValue`. ```tsx ``` #### Delay `delay` is in seconds and starts once the element is in view. ```tsx ``` ### Props | Prop | Type | Default | Description | | --------------- | ----------------- | ------- | ------------------------------------------------------------------ | | `value` | `number` | — | Target value the ticker animates to (or from, when counting down). | | `startValue` | `number` | `0` | Value the counter starts at. | | `direction` | `"up" \| "down"` | `"up"` | `"up"` counts toward `value`; `"down"` counts from `value`. | | `delay` | `number` | `0` | Delay in seconds before the animation begins once in view. | | `decimalPlaces` | `number` | `0` | Number of decimal places to render. | | `damping` | `number` | `60` | Spring damping — higher is less bouncy. | | `stiffness` | `number` | `100` | Spring stiffness — higher is faster. | `NumberTicker` also forwards every standard `` attribute (`className`, `style`, `id`, …) to the root element. --- # Text Animate Source: docs/components/text/text-animate.mdx > Staggered entrance animations for headlines and copy, split by word, character, or line. import { TextAnimate } from "@godui/components"; `TextAnimate` splits text into words, characters, or lines and staggers each fragment through an entrance animation. Animate your ideas into reality ); }`} > Animate your ideas into reality ### Installation `TextAnimate` requires `framer-motion` as a peer dependency: ```bash npm install framer-motion ``` ### Usage ```tsx import { TextAnimate } from "@/components/godui/text-animate"; ``` #### Word fade in ```tsx Animate your ideas into reality ``` #### Character stagger ```tsx Character by character ``` #### Scroll into view ```tsx Scroll to reveal ``` #### Semantic heading ```tsx Hero headline ``` ### Examples Hit the replay button on any preview to play the animation again. #### Word fade in Animate your ideas into reality ); }`} > Animate your ideas into reality #### Character stagger Character by character ); }`} > Character by character #### Scale up Scale up with spring ); }`} > Scale up with spring #### Slide from the right Slide from the right ); }`} > Slide from the right #### Semantic heading Render a real `h1` with `as` while keeping the staggered entrance. Hero headline ); }`} > Hero headline ### Props | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | `children` | `string` | — | Text content to animate | | `animation` | `"fadeIn" \| "blurIn" \| "blurInUp" \| "blurInDown" \| "slideUp" \| "slideDown" \| "slideLeft" \| "slideRight" \| "scaleUp" \| "scaleDown"` | `"fadeIn"` | Entrance animation preset | | `by` | `"text" \| "word" \| "character" \| "line"` | `"word"` | How to split text for staggering | | `as` | `"p" \| "h1"–"h6" \| "span" \| "div" \| …` | `"p"` | Root element to render | | `delay` | `number` | `0` | Delay before animation starts (seconds) | | `duration` | `number` | `0.3` | Total animation duration; also drives default stagger when `stagger` is omitted | | `stagger` | `number` | derived | Delay between each segment | | `startOnView` | `boolean` | `true` | Animate when the element enters the viewport | | `once` | `boolean` | `true` | Animate only the first time it enters view, then never again | | `viewportAmount` | `number \| "some" \| "all"` | `0.3` | How much of the element must be visible to trigger | | `accessible` | `boolean` | `true` | Screen-reader text with `aria-hidden` on animated segments | | `className` | `string` | — | Classes on the root element | | `segmentClassName` | `string` | — | Classes on each animated segment | | `variants` | `Variants` | — | Custom Framer Motion item variants | Respects `prefers-reduced-motion` — text renders immediately without animation when the user has reduced motion enabled. --- # Text Scramble Source: docs/components/text/text-scramble.mdx > Characters cycle through random glyphs and resolve into the target text — a decrypt / matrix reveal. import { TextScramble } from "@godui/components"; import { TextScrambleDemo } from "@/components/demos/text-scramble-demo"; Each character flickers through a glyph pool then locks into place, left to right — the unresolved glyphs glow in the accent color until they settle. When the text changes, only the characters that differ re-scramble. The demo below swaps words on a timer. ; }`} > ### Installation Each position is given a staggered start and end frame; before its start it shows the previous character, between them a random glyph from the charset, and after, the resolved character. Changing `text` animates from the current string to the next, so only the differing characters move. ### Usage ```tsx import { TextScramble } from "@/components/godui/text-scramble"; ``` ```tsx ``` #### Charsets Choose `alphanumeric`, `symbols`, `katakana`, or `binary` — or pass your own string of glyphs. ```tsx ``` #### Triggers `mount` runs once on load, `in-view` waits until scrolled into view, and `hover` runs on pointer enter. ```tsx ``` #### Tuning `speed` is the ms per frame (lower is faster); `spread` is how widely the per-character stagger is spread. ```tsx ``` ### Accessibility The resolved text is always present as a visually hidden, selectable string, so assistive tech and copy/paste get clean text while the animated glyphs are `aria-hidden`. When `prefers-reduced-motion` is set, the text is shown resolved with no scramble. ### Props | Prop | Type | Default | Description | | --------- | ------------------------------------------------- | ---------------- | ---------------------------------------------------- | | `text` | `string` | — | The resolved text; changing it re-scrambles the diff.| | `trigger` | `"mount" \| "in-view" \| "hover"` | `"mount"` | When the first scramble runs. | | `charset` | `"alphanumeric" \| "symbols" \| "katakana" \| "binary"` \| `string` | `"alphanumeric"` | Glyph pool used while unresolved. | | `speed` | `number` | `28` | Milliseconds per frame — lower is faster. | | `spread` | `number` | `28` | Max stagger spread, in frames. | `TextScramble` also forwards every standard `` attribute to the root element. --- # Animated Beam Source: docs/components/visualizations/animated-beam.mdx > An animated gradient beam that travels along a path connecting two separate nodes. import { AnimatedBeamDemo } from "@/components/demos/animated-beam-demo"; import { AnimatedBeamPipelineDemo } from "@/components/demos/animated-beam-pipeline-demo"; import { AnimatedBeamSyncDemo } from "@/components/demos/animated-beam-sync-demo";

); }`} > ### Installation `AnimatedBeam` renders an absolutely-positioned SVG over a container and draws a quadratic path between two child refs, measured live with a `ResizeObserver` and on window resize. A travelling gradient animates along the path. Mount it as the last child of a `relative` container that also holds `fromRef` and `toRef`. ### Usage ```tsx import { AnimatedBeam } from "@/components/godui/animated-beam"; const containerRef = useRef(null); const fromRef = useRef(null); const toRef = useRef(null); ``` ```tsx

``` ### Examples #### Dotted data pipeline Set `pathDashArray` for a dotted or dashed resting line. Here each stage connects with a dotted track (`"0.1 8"` with the round cap renders as dots), and staggered `delay`s send the beam flowing from stage to stage. `} > #### Bidirectional sync Stack two dashed beams with opposite `curvature` — and `reverse` on one — for a continuous two-way connection. `} > ### Props | Prop | Type | Default | Description | | -------------------- | --------------------- | ----------- | -------------------------------------------- | | `containerRef` | `RefObject` | — | Element the SVG overlays. | | `fromRef` | `RefObject` | — | Element the beam starts from. | | `toRef` | `RefObject` | — | Element the beam ends at. | | `curvature` | `number` | `0` | Bow of the curve in pixels. | | `reverse` | `boolean` | `false` | Animate from end toward start. | | `duration` | `number` | `3` | Seconds for one travel of the gradient. | | `delay` | `number` | `0` | Delay before the first travel, in seconds. | | `pathColor` | `string` | `var(--border)` | Color of the static resting path. | | `pathWidth` | `number` | `2` | Width of the path in pixels. | | `pathOpacity` | `number` | `0.2` | Opacity of the static resting path. | | `pathDashArray` | `string` | — | `stroke-dasharray` for the resting path (`"4 5"` dashes, `"0.1 8"` dots). | | `gradientStartColor` | `string` | `var(--primary)` | Leading color of the travelling gradient.| | `gradientStopColor` | `string` | — | Trailing color of the travelling gradient. | --- # Globe Source: docs/components/visualizations/globe.mdx > A draggable, auto-rotating WebGL globe with glowing location markers. import { GlobeDemo } from "@/components/demos/globe-demo";

Deployed across every region on Earth

Routed to the closest data center for sub-50ms responses anywhere.

); }`} > ### Installation `Globe` renders a WebGL globe with [cobe](https://github.com/shuding/cobe), driven by a `requestAnimationFrame` loop. It auto-rotates while idle and hands rotation to the pointer on drag, picking up where the spin left off. Drag it to spin. ### Usage ```tsx import { Globe } from "@/components/godui/globe"; ``` ```tsx ``` #### Custom markers and colors `config` is merged over the defaults and accepts any [cobe option](https://github.com/shuding/cobe#props) — markers, arcs, colors, glow. ```tsx ``` ### Props | Prop | Type | Default | Description | | -------- | ----------------------- | ------- | ------------------------------------------------- | | `config` | `Partial` | — | Override any cobe option (markers, colors, glow). | `Globe` also forwards every standard `
` attribute to the root element. --- # Orbiting Circles Source: docs/components/visualizations/orbiting-circles.mdx > Icons that orbit a center point on a configurable ring, staying upright as they travel. import { OrbitingCircles } from "@godui/components"; import { OrbitingCirclesDemo } from "@/components/demos/orbiting-circles-demo"; GodUI A B C D E F G
); }`} > ### Installation Children are spread evenly around a ring of `radius`. A single ring animation carries every slot in lockstep while each slot counter-rotates so its content stays upright. The orbit pauses entirely under `prefers-reduced-motion`. ### Usage ```tsx import { OrbitingCircles } from "@/components/godui/orbiting-circles"; ``` ```tsx ``` #### Reversed inner ring Stack two rings with different `radius`, `duration`, and `reverse` for a layered ecosystem diagram. 1 2 3 4 5
`} >
1 2 3 4 5
### Props | Prop | Type | Default | Description | | ---------- | --------- | ------- | -------------------------------------------- | | `radius` | `number` | `120` | Orbit radius in pixels. | | `duration` | `number` | `20` | Seconds per full revolution. | | `delay` | `number` | `0` | Delay before the orbit starts, in seconds. | | `reverse` | `boolean` | `false` | Reverse the orbit direction. | | `showPath` | `boolean` | `true` | Render the faint circular track. | | `iconSize` | `number` | `40` | Size of each orbiting slot in pixels. | `OrbitingCircles` also forwards every standard `
` attribute to the root element. --- # Motion Patterns Source: docs/guidelines/patterns.mdx > The reusable motion recipes that put the principles into practice — one card per pattern. import { MotionPatterns } from "@/components/motion-guidelines/motion-patterns"; If [Principles](/docs/guidelines/principles) are the *why*, these patterns are the *how*. Each one is a small, proven recipe drawn straight from the components, built from the same handful of springs, durations, and easings so everything in GodUI moves with one voice. Press play on any card to see it run. --- # Motion Principles Source: docs/guidelines/principles.mdx > The philosophy behind every animation in GodUI — twelve principles, each with a live demo. import { MotionPrinciples } from "@/components/motion-guidelines/motion-principles"; Motion in GodUI is never decoration. Every animation earns its place by making the interface clearer, calmer, and easier to follow. These twelve principles are the shared language behind the whole collection — each card below demonstrates one in motion. For the concrete recipes that implement them, see [Patterns](/docs/guidelines/patterns). ### References These principles aren't invented — they distil the established motion canon, and the token values track it directly (durations map to Material 3's `short3 / short4 / medium2`; the spring presets mirror Material 3 Expressive's overshoot vs. subdued schemes). - [Material Design 3 — Motion](https://m3.material.io/styles/motion/overview/how-it-works) · [Easing & duration](https://m3.material.io/styles/motion/easing-and-duration) · [Building with M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive) - [Apple Human Interface Guidelines — Motion](https://developer.apple.com/design/human-interface-guidelines/motion) - [Disney's 12 principles of animation, applied to UI (IxDF)](https://www.interaction-design.org/literature/article/ui-animation-how-to-apply-disney-s-12-principles-of-animation-to-ui-design) --- # Introduction Source: docs/index.mdx > An open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui. import { Cards, Card } from "fumadocs-ui/components/card"; import { MagicButton } from "@godui/components"; **GodUI** is a collection of open-source, animated UI components for Design Engineers. Built with **React**, **TypeScript**, **Tailwind CSS v4**, and **Motion**, and distributed as a [shadcn](https://ui.shadcn.com) registry — so the components are copied straight into your project and you own every line. Get Started; }`}> Get Started ### What you get - **You own the code.** Components are installed into your codebase via the shadcn CLI — not hidden behind a versioned dependency. - **Motion-first.** Every component ships with polished, performant animation out of the box. - **shadcn-native.** Same install flow as shadcn/ui. If you already use shadcn, just add the `@godui` registry. - **Tailwind v4 tokens.** Themed with CSS variables — light and dark modes work with zero extra config. - **Type-safe.** Full TypeScript types for every component and its props. ### Next steps Add the `@godui` registry and pull your first component in minutes. Browse the full collection of animated components. --- # Installation Source: docs/installation.mdx > Install GodUI components with the shadcn CLI. GodUI is a design system built with Tailwind CSS v4 and React, distributed as a [shadcn](https://ui.shadcn.com) registry. Components are copied straight into your project — you own the source. > **Note:** We have the exact same installation process as > [shadcn/ui](https://ui.shadcn.com/docs/installation). If you already use > shadcn, skip straight to step 2. ### 1. Create project Run the `init` command to create a new project or to set up an existing one: ```bash pnpm dlx shadcn@latest init ``` ### 2. Add components Add any GodUI component with its registry URL — no configuration required: ```bash pnpm dlx shadcn@latest add https://godui.design/r/magic-button.json ``` This copies the component into `components/godui/` and merges the GodUI theme tokens and component styles into your global stylesheet automatically. ### Typography (bring your own font) GodUI is font-agnostic. The theme ships a neutral system font stack as the default, so components look right with zero setup. To use any font, override `--font-sans` (and optionally `--font-mono` / `--font-serif`) in your global stylesheet — everything inherits it. ```css title="globals.css" :root { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; } ``` #### Optional: Geist (the GodUI brand font) The docs site uses [Geist](https://vercel.com/font). To match it in a Next.js app, install `geist` and point `--font-sans` / `--font-mono` at its variables: ```bash pnpm add geist ``` ```tsx title="app/layout.tsx" import { GeistMono, GeistSans } from "geist/font"; export default function RootLayout({ children }) { return ( {children} ); } ``` ```css title="globals.css" :root { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } ``` ### Dark mode The theme supports light and dark via the `.dark` class on a parent element (typically ``). Toggle it with your framework's theme switcher. ```html ``` Browse the [Magic Button](/docs/components/buttons/magic-button) docs for a live preview. --- # MCP Server Source: docs/mcp.mdx > Use GodUI from your AI IDE — discover and install components by description. GodUI ships an [MCP](https://modelcontextprotocol.io) server so AI coding agents (Cursor, Windsurf, Claude, Cline, Roo-Cline, …) can browse the GodUI catalog and install components straight into your project. Add it once, then just ask for the component you want in plain language. ### Installation Use the **CLI** to write the config automatically, or add it **Manually**. The server runs locally over `stdio` via `npx` — no API key, no account. The CLI installs into your editor's MCP config; with Manual you paste the block into it yourself. ### Usage Ask your IDE to use any GodUI component: - "Add a GodUI magic button" - "Add a marquee of logos" - "Add an animated gradient background" - "Add a number ticker that counts to 1000" The agent finds the right component, then installs it with the [shadcn CLI](/docs/installation) — copying the source into your project so you own it. ### Tools The server exposes three tools: | Tool | What it does | | --- | --- | | `list_components` | List the full catalog, optionally filtered by category. | | `search_components` | Find components by what they do (natural language). | | `get_component` | Fetch one component's install command and full source. | ### How it works The server fetches the live registry at `https://godui.design/r`, so it always serves the latest components — no upgrade needed when GodUI ships something new. Point it at a local registry for development by setting `GODUI_REGISTRY_URL`: ```bash GODUI_REGISTRY_URL=http://localhost:3000/r npx @godui/mcp@latest ``` --- ## About This Document This concatenated documentation file is generated automatically by aeo.js to make it easier for AI systems to understand the complete context of this project. For a structured index, see: https://godui.design/llms.txt For individual files, see: https://godui.design/docs.json Generated by aeo.js - https://aeojs.org

Built with precision

Built with precision

Generative by default

Generative by default

Step into the light

Step into the light

Fluid by nature

Fluid by nature

Chart the unknown

Chart the unknown

Reach the stars

Reach the stars

Move your cursor

Move your cursor

Build something the world remembers

Your headline

Violet light

Pro

Title

Pointer-aware surface

Pointer-aware surface

Any color you like

Any color you like

Trace the edge

Trace the edge

Liquid Glass

Liquid Glass

Frosted panel

Liquid Glass

Liquid Glass

{f.title}

{c.title}

Designed in 3D

Title

Deeper parallax

Deeper parallax

Ship beautiful UI

Ship beautiful UI

Deployed across every region on Earth