{ "version": "1.0", "generated": "2026-06-29T15:06:02.356Z", "site": { "title": "GodUI — Animated React UI Components for Design Engineers", "description": "GodUI is an open-source collection of animated UI components for React, built with TypeScript, Tailwind CSS, and Motion. Copy-paste, shadcn/ui-ready components for design engineers.", "url": "https://godui.design" }, "entries": [ { "id": "01d29f660b7df86a", "url": "https://godui.design/docs/components/effects/spotlight-card", "title": "Spotlight Card (Part 3)", "content": "\n

Trace the edge

\n

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

\n`}\n>\n \n

Trace the edge

\n

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

\n \n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ----------- | --------- | ------------------------------------------------------- | ---------------------------------------- |\n| `glowColor` | `string` | `color-mix(in oklch, var(--primary) 40%, transparent)` | Color of the spotlight glow. |\n| `radius` | `number` | `350` | Spotlight radius in pixels. |\n| `border` | `boolean` | `true` | Also light the card border on move. |\n\n`SpotlightCard` also forwards every standard `
` attribute to the root element.", "description": "A card with a radial spotlight glow that follows the pointer, optionally lighting the border.", "keywords": [ "classname", "spotlightcard", "border", "text-sm", "font-semibold", "text-foreground", "glowcolor", "oklch", "componentpreview", "glow" ], "metadata": { "title": "Spotlight Card", "description": "A card with a radial spotlight glow that follows the pointer, optionally lighting the border.", "chunkIndex": 2, "totalChunks": 3, "sourcePath": "docs/components/effects/spotlight-card.mdx" } }, { "id": "02808d947f1e4834", "url": "https://godui.design/docs/components/navigation/magic-tab", "title": "Magic Tab (Part 2)", "content": "const items = [\n { value: \"overview\", label: \"Overview\" },\n { value: \"analytics\", label: \"Analytics\" },\n { value: \"reports\", label: \"Reports\" },\n];\n\nexport function MagicTabPlain() {\n return ;\n}`}\n>\n \n\n\n### Disabled tab\n\nMark any item `disabled` to skip it.\n\n;\n}`}\n>\n \n\n\n### Sizes\n\n` attribute to the root element.", "description": "Icons that orbit a center point on a configurable ring, staying upright as they travel.", "keywords": [ "chip", "orbitingcircles", "classname", "span", "radius", "duration", "flex", "items-center", "justify-center", "text-sm" ], "metadata": { "title": "Orbiting Circles", "description": "Icons that orbit a center point on a configurable ring, staying upright as they travel.", "chunkIndex": 2, "totalChunks": 3, "sourcePath": "docs/components/visualizations/orbiting-circles.mdx" } }, { "id": "065e49c1012c69cf", "url": "https://godui.design/docs/guidelines/patterns", "title": "Motion Patterns", "content": "import { MotionPatterns } from \"@/components/motion-guidelines/motion-patterns\";\n\nIf [Principles](/docs/guidelines/principles) are the *why*, these patterns are the\n*how*. Each one is a small, proven recipe drawn straight from the components, built\nfrom the same handful of springs, durations, and easings so everything in GodUI\nmoves with one voice. Press play on any card to see it run.\n\n", "description": "The reusable motion recipes that put the principles into practice — one card per pattern.", "keywords": [ "from", "motionpatterns", "components", "principles", "import", "motion-guidelines", "motion-patterns", "docs", "guidelines", "these" ], "metadata": { "title": "Motion Patterns", "description": "The reusable motion recipes that put the principles into practice — one card per pattern.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/guidelines/patterns.mdx" } }, { "id": "0cd1a058ff8cfc67", "url": "https://godui.design/docs/components/ai/agent-timeline", "title": "Agent Timeline (Part 2)", "content": "| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------------- | --------- | ----------------------------------------- |\n| `status` | `\"pending\" \\| \"running\" \\| \"success\" \\| \"error\"` | `\"pending\"` | Drives the node icon and connector fill. |\n| `title` | `ReactNode` | — | Step label. |\n| `meta` | `ReactNode` | — | Secondary label (duration, tool name). |\n| `children` | `ReactNode` | — | Collapsible body. Omit for a leaf step. |\n| `defaultOpen` | `boolean` | `false` | Start expanded. |\n| `last` | `boolean` | `false` | Hides the connector below the step. |", "description": "A vertical timeline of agent steps with live status, a spring-filled connector, and collapsible reasoning or tool-output bodies that morph open.", "keywords": [ "agentstep", "agenttimeline", "status", "title", "step", "running", "from", "success", "pending", "import" ], "metadata": { "title": "Agent Timeline", "description": "A vertical timeline of agent steps with live status, a spring-filled connector, and collapsible reasoning or tool-output bodies that morph open.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/ai/agent-timeline.mdx" } }, { "id": "0d36b62754ccc5e6", "url": "https://godui.design/docs/components/navigation/filter-bar", "title": "Filter Bar (Part 2)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `facets` | `Facet[]` | — | `{ id, label, options: { label, value, count? }[] }` |\n| `value` | `Record` | — | Controlled selection |\n| `defaultValue` | `Record` | `{}` | Uncontrolled initial selection |\n| `onChange` | `(value) => void` | — | Called when the selection changes |\n| `searchable` | `boolean` | `true` | Show a search box in each popover |\n| `showCounts` | `boolean` | `true` | Show option count badges |", "description": "A faceted filter bar with searchable multi-select popovers, count badges, and selections that spring inline into each facet pill.", "keywords": [ "value", "label", "count", "facets", "status", "string", "import", "from", "filterbar", "const" ], "metadata": { "title": "Filter Bar", "description": "A faceted filter bar with searchable multi-select popovers, count badges, and selections that spring inline into each facet pill.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/navigation/filter-bar.mdx" } }, { "id": "0dfd6d1c0043b562", "url": "https://godui.design/docs/components/effects/scroll-progress", "title": "Scroll Progress", "content": "import { ScrollProgressCircleDemo, ScrollProgressDemo } from \"@/components/demos/scroll-progress-demo\";\n\nThe `bar` variant pins a progress line to the top of the page and fills as the\nreader scrolls. Leave `container` unset to track the whole page, or pass a ref\nto track a scrollable element (as the preview below does).\n\n;\n}`}\n>\n \n\n\n## Circle variant\n\n`variant=\"circle\"` renders a circular progress ring that fades in past\n`showAfter` and scrolls back to top on click.\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { ScrollProgress } from \"@godui/components\";\n\n// Whole-page reading bar\n;\n\n// Track a specific section\nconst ref = useRef(null);\n;\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `variant` | `\"bar\" \\| \"circle\"` | `\"bar\"` | Progress style. |\n| `container` | `RefObject` | — | Track a scrollable element and pin within it. |\n| `target` | `RefObject` | — | Track a target's progress through the viewport. |\n| `height` | `number` | `3` | Bar thickness in px. |\n| `size` | `number` | `44` | Ring diameter in px. |\n| `showAfter` | `number` | `0.05` | Reveal the ring past this fraction. |\n| `position` | `\"bottom-right\" \\| \"bottom-left\"` | `\"bottom-right\"` | Corner the ring docks to. |", "description": "A spring-smoothed reading indicator — a pinned top bar or a fading back-to-top ring.", "keywords": [ "scrollprogress", "variant", "track", "import", "from", "components", "progress", "componentpreview", "circle", "ring" ], "metadata": { "title": "Scroll Progress", "description": "A spring-smoothed reading indicator — a pinned top bar or a fading back-to-top ring.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/effects/scroll-progress.mdx" } }, { "id": "11fe553d57b1754d", "url": "https://godui.design/docs/components/ai/agent-timeline", "title": "Agent Timeline (Part 1)", "content": "import { AgentTimelineDemo } from \"@/components/demos/agent-timeline-demo\";\n\n\n \n Indexed 128 files across 6 packages.\n \n \n Changed the expiry check from < to <=.\n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nEach `AgentStep` reflects a `status` (`pending`, `running`, `success`,\n`error`). Running steps pulse and the connector below fills as the step\ncompletes. Steps with children become collapsible — click to morph the body\nopen.\n\n## Usage\n\n```tsx\nimport { AgentTimeline, AgentStep } from \"@/components/godui/agent-timeline\";\n```\n\n```tsx\n\n \n Optional collapsible body.\n \n \n\n```\n\n## Props\n\n### AgentStep", "description": "A vertical timeline of agent steps with live status, a spring-filled connector, and collapsible reasoning or tool-output bodies that morph open.", "keywords": [ "agentstep", "agenttimeline", "status", "title", "step", "running", "from", "success", "pending", "import" ], "metadata": { "title": "Agent Timeline", "description": "A vertical timeline of agent steps with live status, a spring-filled connector, and collapsible reasoning or tool-output bodies that morph open.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/ai/agent-timeline.mdx" } }, { "id": "15edcf1792edc267", "url": "https://godui.design/docs/components/layout/bento-grid", "title": "Bento Grid (Part 2)", "content": "Pass `icon`, `title`, `description`, and `cta` for the built-in layout, or drop in your\nown `children` for full control.\n\n## Props\n\n### BentoGrid\n\n| Prop | Type | Default | Description |\n| --------- | --------------- | ------- | ------------------------------------ |\n| `columns` | `2 \\| 3 \\| 4` | `3` | Number of columns on large screens. |\n\n### BentoCard\n\n| Prop | Type | Default | Description |\n| ------------- | -------------- | ------- | ---------------------------------------- |\n| `colSpan` | `1 \\| 2 \\| 3` | `1` | Columns the card spans on large screens. |\n| `rowSpan` | `1 \\| 2` | `1` | Rows the card spans on large screens. |\n| `icon` | `ReactNode` | — | Leading icon / media. |\n| `title` | `ReactNode` | — | Card heading. |\n| `description` | `ReactNode` | — | Supporting copy. |\n| `cta` | `ReactNode` | — | Call-to-action pinned to the bottom. |\n\nBoth components forward every standard `
` attribute to their root element.", "description": "A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover.", "keywords": [ "bentocard", "description", "bentogrid", "classname", "title", "span", "icon", "from", "iconwrap", "import" ], "metadata": { "title": "Bento Grid", "description": "A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/bento-grid.mdx" } }, { "id": "16464cd8400ab567", "url": "https://godui.design/docs/components/navigation/magic-tab", "title": "Magic Tab (Part 3)", "content": "export function MagicTabSizes() {\n return (\n
\n \n \n \n
\n );\n}`}\n>\n
\n \n \n \n
\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `items` | `MagicTabItem[]` | — | Tabs to render: `{ value, label, disabled? }` |\n| `value` | `string` | — | Controlled selected value |\n| `defaultValue` | `string` | first enabled item | Uncontrolled initial value |\n| `onValueChange` | `(value: string) => void` | — | Called when the selected tab changes |\n| `variant` | `\"default\" \\| \"secondary\"` | `\"default\"` | Selected-tab color scheme |\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Tab padding and text size |\n| `rainbow` | `boolean` | `true` | Animate the selected tab's 3D edge and shadow with a rainbow gradient |", "description": "A segmented tab bar where the selected option lifts into a 3D button with an optional rainbow edge.", "keywords": [ "value", "overview", "label", "items", "analytics", "reports", "magictab", "defaultvalue", "componentpreview", "size" ], "metadata": { "title": "Magic Tab", "description": "A segmented tab bar where the selected option lifts into a 3D button with an optional rainbow edge.", "chunkIndex": 2, "totalChunks": 3, "sourcePath": "docs/components/navigation/magic-tab.mdx" } }, { "id": "17abcbd9d2d63e3e", "url": "https://godui.design/docs/components/layout/image-accordion", "title": "Image Accordion (Part 1)", "content": "import { ImageAccordion } from \"@godui/components\";\nimport { ImageAccordionDemo } from \"@/components/demos/image-accordion-demo\";\n\nAn 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.\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\nThe active panel grows via an animated `flex-grow` while its neighbours\ncompress in the same timeline — no layout jump. Idle panels show a compact\nvertical label; the active one reveals a full caption that slides up.\n\n## Usage\n\n```tsx\nimport { ImageAccordion } from \"@/components/godui/image-accordion\";\n```\n\n```tsx\n\n```\n\n### Links\n\nGive a panel an `href` to render it as an anchor.\n\n```tsx\n\n```\n\n### Tuning", "description": "Horizontal image panels that expand on hover to reveal their caption — an elegant, space-efficient gallery.", "keywords": [ "panel", "panels", "image", "title", "description", "imageaccordion", "height", "import", "from", "components" ], "metadata": { "title": "Image Accordion", "description": "Horizontal image panels that expand on hover to reveal their caption — an elegant, space-efficient gallery.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/image-accordion.mdx" } }, { "id": "191d7ef42cdfbdd6", "url": "https://godui.design/docs/components/overlays/morphing-dialog", "title": "Morphing Dialog (Part 1)", "content": "import {\n MorphingDialog,\n MorphingDialogTrigger,\n MorphingDialogContent,\n MorphingDialogClose,\n} from \"@godui/components\";\nimport { MorphingDialogDemo } from \"@/components/demos/morphing-dialog-demo\";\n\n\n \n
Aurora Sessions
\n \n \n
Aurora Sessions
\n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nThe trigger and content share a `layoutId`, so opening the dialog morphs the card\ninto the modal with an underdamped spring and a blurred backdrop fade — and\nreverses on close. Escape and backdrop clicks dismiss it, body scroll locks while\nopen, and the spring is skipped under `prefers-reduced-motion`.\n\n## Usage\n\n```tsx\nimport {\n MorphingDialog,\n MorphingDialogTrigger,\n MorphingDialogContent,\n MorphingDialogClose,\n} from \"@/components/godui/morphing-dialog\";\n```\n\nWrap a trigger and content in a single `MorphingDialog`. It's uncontrolled by\ndefault; pass `open` / `onOpenChange` to control it.\n\n```tsx\n\n {/* collapsed card */}\n \n {/* expanded view */}\n \n \n\n```\n\n## Props\n\n### MorphingDialog", "description": "A card that physically morphs into a modal through a shared layout, then springs back on close.", "keywords": [ "morphingdialog", "morphingdialogtrigger", "morphingdialogcontent", "morphingdialogclose", "open", "import", "from", "components", "classname", "godui" ], "metadata": { "title": "Morphing Dialog", "description": "A card that physically morphs into a modal through a shared layout, then springs back on close.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/overlays/morphing-dialog.mdx" } }, { "id": "19b1c418a16dfbb4", "url": "https://godui.design/docs/components/backgrounds/warp-starfield", "title": "Warp Starfield (Part 2)", "content": "export function WarpStarfieldHyperspace() {\n return (\n
\n \n
\n );\n}`}\n>\n
\n \n
\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `starCount` | `number` | `400` | Number of stars (auto-scaled to area). |\n| `speed` | `number` | `1` | Forward speed multiplier. |\n| `depth` | `number` | `1.5` | Field depth — larger is deeper. |\n| `color` | `string` | `--color-foreground` | Star color. |\n| `warp` | `boolean` | `false` | Hyperspace mode — stars become streaks. |\n| `parallax` | `number` | `30` | Cursor parallax strength (px). |\n\nAlso accepts standard `div` attributes (e.g. `className`, `style`).", "description": "A depth starfield you fly through — cursor parallax and an optional hyperspace warp.", "keywords": [ "classname", "warpstarfield", "relative", "stars", "overflow-hidden", "number", "import", "from", "godui", "components" ], "metadata": { "title": "Warp Starfield", "description": "A depth starfield you fly through — cursor parallax and an optional hyperspace warp.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/backgrounds/warp-starfield.mdx" } }, { "id": "1c74edbb3f89a537", "url": "https://godui.design/docs/components/buttons/magic-button", "title": "Magic Button (Part 1)", "content": "import { MagicButton } from \"@godui/components\";\n\n\n Push me\n Push me\n
\n );\n}`}\n>\n
\n Push me\n Push me\n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { MagicButton } from \"@/components/godui/magic-button\";\n```\n\n```tsx\nPush me\n```\n\n## Examples\n\n### Sizes\n\n\n Small\n Medium\n Large\n
\n );\n}`}\n>\n
\n Small\n Medium\n Large\n
\n\n\n### Without rainbow\n\nSet `rainbow={false}` for a static 3D edge that uses the variant color instead of the animated gradient.\n\nNo shimmer;\n}`}\n>\n No shimmer\n\n\n### Disabled\n\nDisabled;\n}`}\n>\n Disabled\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `variant` | `\"primary\" \\| \"secondary\" \\| \"outline\"` | `\"primary\"` | Visual style of the button |\n| `size` | `\"sm\" \\| \"default\" \\| \"lg\"` | `\"default\"` | Button padding and text size |\n| `shimmer` | `boolean` | `true` | Animate the button with a shimmering border light effect |\n| `shimmerColor` | `string` | variant default | Color of the shimmering light |\n| `shimmerDuration` | `string` | `\"3s\"` | Duration of the shimmer animation |\n| `background` | `string` | variant default | Background color override |", "description": "A button with an animated shimmering border light effect.", "keywords": [ "shimmerbutton", "variant", "componentpreview", "size", "shimmer", "primary", "import", "from", "godui", "components" ], "metadata": { "title": "Shimmer Button", "description": "A button with an animated shimmering border light effect.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/buttons/shimmer-button.mdx" } }, { "id": "1db4915e6af6fa08", "url": "https://godui.design/docs/components/index", "title": "Components (Part 6)", "content": "## Text\n\n\n \n Gradient text with a rainbow aurora that drifts across the letters.\n \n \n Variable-font text whose weight springs up under an automatic spotlight or\n the pointer.\n \n \n Draw hand-drawn sketch annotations over inline text — highlight, underline,\n box, circle, and more.\n \n \n Animates a number to its target value with spring physics when scrolled into\n view.\n \n \n Staggered entrance animations for headlines and copy, split by word,\n character, or line.\n \n \n Characters cycle through random glyphs and resolve into the target text — a\n decrypt / matrix reveal.\n \n\n\n## AI", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 5, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "1ff8f1b7020b81ad", "url": "https://godui.design/docs/components/effects/border-beam", "title": "Border Beam (Part 1)", "content": "import { BorderBeam } from \"@godui/components\";\nimport { BorderBeamDemo } from \"@/components/demos/border-beam-demo\";\n\nA streak of light rides the border of whatever you put it in. Drop it inside a\n`relative overflow-hidden` element — most often a [shadcn\n`Card`](https://ui.shadcn.com/docs/components/card) — and it traces the rounded\ncorners on a loop.\n\n\n \n Border Beam\n A beam of light circles the card.\n \n \n

\n Wrap it in a relative, overflow-hidden container.\n

\n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { BorderBeam } from \"@/components/godui/border-beam\";\nimport { Card } from \"@/components/ui/card\";\n```\n\n`Card` is shadcn's own component — add it with `npx shadcn@latest add card`.\n`BorderBeam` works inside any `relative overflow-hidden` element.\n\n```tsx\n\n \n\n```\n\nKeep `size` no larger than half the card's shortest side — a beam wider than the\ncard has no straight edge to travel and the corners look pinched. The beam is\nabsolutely positioned and fills its nearest positioned ancestor, so\nthat parent must be `relative`. Add `overflow-hidden` to keep the corners clean.\nRender two beams with opposite `delay` values for a continuous double chase, or\nset `glow` for a neon echo.", "description": "An animated beam of light that travels around the border of its container.", "keywords": [ "borderbeam", "classname", "card", "relative", "overflow-hidden", "border", "size", "beam", "components", "import" ], "metadata": { "title": "Border Beam", "description": "An animated beam of light that travels around the border of its container.", "chunkIndex": 0, "totalChunks": 4, "sourcePath": "docs/components/effects/border-beam.mdx" } }, { "id": "207443c402823a27", "url": "https://godui.design/docs/components/collaboration/presence-facepile", "title": "Presence Facepile", "content": "import { PresenceFacepileDemo } from \"@/components/demos/presence-facepile-demo\";\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\nAvatars carry a status ring (`active`, `idle`, `typing`, `offline`) and reorder\nwith a spring as users join or leave. Beyond `max`, the rest collapse into a\n`+N` chip that opens a presence list. Colors are stable per user via the shared\npresence palette.\n\n## Usage\n\n```tsx\nimport { PresenceFacepile } from \"@/components/godui/presence-facepile\";\n```\n\n```tsx\n\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------ | ------------------------- | ------- | ------------------------------------ |\n| `users` | `PresenceUser[]` | — | People to render. |\n| `max` | `number` | `5` | Avatars before the `+N` chip. |\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Avatar size. |\n| `showStatus` | `boolean` | `true` | Render status rings/typing dots. |", "description": "Live avatars with animated status rings, spring join/leave, and a +N overflow that expands into a presence list — who's online, idle, or typing right now.", "keywords": [ "status", "users", "name", "presencefacepile", "active", "import", "presencefacepiledemo", "from", "components", "typing" ], "metadata": { "title": "Presence Facepile", "description": "Live avatars with animated status rings, spring join/leave, and a +N overflow that expands into a presence list — who's online, idle, or typing right now.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/collaboration/presence-facepile.mdx" } }, { "id": "20daf48949f86e5e", "url": "https://godui.design/docs/components/layout/progressive-card-reveal", "title": "Progressive Card Reveal (Part 2)", "content": "return (\n \n {legs.map((leg) => (\n \n \n
\n \n {leg.icon}\n {leg.label}\n \n {leg.meta}\n
\n \n \n
\n \n {leg.icon}\n {leg.label}\n \n
\n
\n

Distance

\n

{leg.distance}

\n
\n
\n

Time

\n

{leg.time}

\n
\n
\n
\n \n \n ))}\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { ProgressiveCardReveal } from \"@/components/godui/progressive-card-reveal\";\n```", "description": "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.", "keywords": [ "progressivecardreveal", "card", "classname", "span", "cardcollapsed", "cardexpanded", "time", "label", "hours", "from" ], "metadata": { "title": "Progressive Card Reveal", "description": "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.", "chunkIndex": 1, "totalChunks": 4, "sourcePath": "docs/components/layout/progressive-card-reveal.mdx" } }, { "id": "21e7934491da05e5", "url": "https://godui.design/docs/components/effects/scroll-reveal", "title": "Scroll Reveal (Part 2)", "content": "\n {items.map((item, i) => (\n \n
{item}
\n \n ))}\n`}\n>\n
\n {[\"Plan\", \"Build\", \"Ship\", \"Measure\", \"Iterate\", \"Scale\"].map((item, i) => (\n \n
{item}
\n \n ))}\n
\n\n\n### From the left, no blur\n\n\n
Slides in from the left
\n`}\n>\n \n
Slides in from the left
\n \n\n\n## Props", "description": "Reveals its children with a spring as they scroll into view, with optional velocity skew.", "keywords": [ "scrollreveal", "from", "classname", "delay", "direction", "left", "componentpreview", "rounded-xl", "border", "border-border" ], "metadata": { "title": "Scroll Reveal", "description": "Reveals its children with a spring as they scroll into view, with optional velocity skew.", "chunkIndex": 1, "totalChunks": 3, "sourcePath": "docs/components/effects/scroll-reveal.mdx" } }, { "id": "22481f31a90e85a4", "url": "https://godui.design/docs/components/index", "title": "Components (Part 8)", "content": "\n \n An animated gradient beam that travels along a path connecting two separate\n nodes.\n \n \n A draggable, auto-rotating WebGL globe with glowing location markers.\n \n \n Icons that orbit a center point on a configurable ring, staying upright as\n they travel.\n \n\n\n## Effects", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 7, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "224c783237b8259d", "url": "https://godui.design/docs/components/buttons/progress-fold-button", "title": "Progress Fold Button (Part 1)", "content": "import { ProgressFoldButton } from \"@godui/components\";\n\n\n Submit\n Submit\n \n );\n}`}\n>\n
\n Submit\n Submit\n
\n\n\nThe front face folds back on hover, revealing the layers behind it. Set\n`status=\"loading\"` to hold the fold open and run a progress bar — controlled by\nyou, like the Magic Input.\n\n## Loading\n\n`status` and `progress` are fully controlled. While `status=\"loading\"` the front\nface folds open and a progress bar runs behind it — determinate when you pass\n`progress`, otherwise an indeterminate segment sweeps across. Back to `idle` and\nthe front folds flat again.\n\n\n Indeterminate\n \n Determinate\n \n \n );\n}`}\n>\n
\n Indeterminate\n \n Determinate\n \n
\n\n\nWire it up by flipping `status` from your handler:", "description": "A 3D button whose front face folds back to reveal a controlled progress bar while loading.", "keywords": [ "progressfoldbutton", "loading", "status", "from", "import", "componentpreview", "submit", "progress", "size", "godui" ], "metadata": { "title": "Progress Fold Button", "description": "A 3D button whose front face folds back to reveal a controlled progress bar while loading.", "chunkIndex": 0, "totalChunks": 3, "sourcePath": "docs/components/buttons/progress-fold-button.mdx" } }, { "id": "25893f94384c2b3e", "url": "https://godui.design/docs/components/text/text-scramble", "title": "Text Scramble (Part 2)", "content": "The resolved text is always present as a visually hidden, selectable string, so\nassistive tech and copy/paste get clean text while the animated glyphs are\n`aria-hidden`. When `prefers-reduced-motion` is set, the text is shown resolved\nwith no scramble.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --------- | ------------------------------------------------- | ---------------- | ---------------------------------------------------- |\n| `text` | `string` | — | The resolved text; changing it re-scrambles the diff.|\n| `trigger` | `\"mount\" \\| \"in-view\" \\| \"hover\"` | `\"mount\"` | When the first scramble runs. |\n| `charset` | `\"alphanumeric\" \\| \"symbols\" \\| \"katakana\" \\| \"binary\"` \\| `string` | `\"alphanumeric\"` | Glyph pool used while unresolved. |\n| `speed` | `number` | `28` | Milliseconds per frame — lower is faster. |\n| `spread` | `number` | `28` | Max stagger spread, in frames. |\n\n`TextScramble` also forwards every standard `` attribute to the root element.", "description": "Characters cycle through random glyphs and resolve into the target text — a decrypt / matrix reveal.", "keywords": [ "text", "textscramble", "from", "charset", "string", "spread", "import", "components", "resolved", "hover" ], "metadata": { "title": "Text Scramble", "description": "Characters cycle through random glyphs and resolve into the target text — a decrypt / matrix reveal.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/text/text-scramble.mdx" } }, { "id": "26fa23499722c928", "url": "https://godui.design/docs/components/backgrounds/light-rays", "title": "Light Rays (Part 2)", "content": "export function LightRaysWarm() {\n return (\n
\n \n
\n );\n}`}\n>\n
\n \n
\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `rayCount` | `number` | `14` | Number of rays in the fan. |\n| `color` | `string` | `--color-primary` | Ray color. |\n| `speed` | `number` | `1` | Sweep speed multiplier. |\n| `angle` | `number` | `0` | Base angle (deg) the fan points from. |\n| `intensity` | `number` | `0.6` | Overall ray opacity, `0`–`1`. |\n| `grain` | `number` | `0.05` | Film-grain amount, `0`–`1` (`0` disables it). |\n\nAlso accepts standard `div` attributes (e.g. `className`, `style`).", "description": "Volumetric god-rays that slowly sweep and breathe, with optional film grain. Pure CSS.", "keywords": [ "classname", "lightrays", "relative", "overflow-hidden", "from", "number", "color", "import", "godui", "components" ], "metadata": { "title": "Light Rays", "description": "Volumetric god-rays that slowly sweep and breathe, with optional film grain. Pure CSS.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/backgrounds/light-rays.mdx" } }, { "id": "2910d46c27110349", "url": "https://godui.design/docs/components/layout/animated-testimonials", "title": "Animated Testimonials (Part 2)", "content": "| Prop | Type | Default | Description |\n| -------------- | ---------------- | ------- | -------------------------------------- |\n| `testimonials` | `Testimonial[]` | — | Testimonials to cycle through. |\n| `autoplay` | `boolean` | `true` | Advance automatically. |\n| `interval` | `number` | `5000` | Autoplay interval in milliseconds. |\n\nEach `Testimonial` is `{ quote, name, role, src }`. The component also forwards every\nstandard `
` attribute to the root element.", "description": "A testimonial carousel with a shuffling image stack and crossfading quotes.", "keywords": [ "testimonials", "animatedtestimonials", "quote", "name", "role", "engineer", "godui", "grace", "import", "from" ], "metadata": { "title": "Animated Testimonials", "description": "A testimonial carousel with a shuffling image stack and crossfading quotes.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/animated-testimonials.mdx" } }, { "id": "2a86cbfcc13325bc", "url": "https://godui.design/docs/components/index", "title": "Components (Part 3)", "content": "\n \n A breadcrumb trail with hover-fill pills, animated path changes, and an\n overflow that collapses into an expandable popover.\n \n \n A type-ahead autocomplete with staggered result reveal, highlighted matches,\n keyboard navigation, and an async loading state.\n \n \n A right-click menu that springs from the cursor point and flips to stay in the\n viewport, with shortcuts and destructive actions.\n \n \n A macOS-style dock whose items magnify with spring physics as the pointer\n moves across them.\n \n \n An accessible dropdown that springs open from its trigger edge, with submenus,\n shortcuts, separators, and keyboard navigation.\n \n \n A faceted filter bar with searchable multi-select popovers, count badges, and\n active filters that spring in and out as chips.\n \n \n A segmented tab bar where the selected option lifts into a 3D button with an\n optional rainbow edge.\n \n \n A Vercel-style menu with a direction-aware highlight and a panel that springs\n and height-morphs between triggers.\n \n \n A sticky navbar that springs into a compact, blurred floating pill as you\n scroll, with a shared-element active indicator.\n \n \n An iOS-style selector with a sliding pill that springs between options.\n \n \n A mobile bottom navigation where a shared-element blob slides under the active\n tab and the icon gives a haptic-style pop.\n \n", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 2, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "2c00849b25f8a8b8", "url": "https://godui.design/docs/components/buttons/magnetic-button", "title": "Magnetic Button (Part 1)", "content": "import { MagneticButton } from \"@godui/components\";\nimport { MagneticButtonDemo } from \"@/components/demos/magnetic-button-demo\";\n\n\n \n Get started\n \n \n \n \n Star on GitHub\n \n \n Label stays centered\n \n
\n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`MagneticButton` wraps the button in an invisible sensor. As the pointer moves\ninside that area, the button spring-translates toward the cursor by `strength`,\nand the label drifts a little further for a layered, parallax feel. On exit both\nspring back to rest. The pull is disabled under `prefers-reduced-motion`.\n\n## Usage\n\n```tsx\nimport { MagneticButton } from \"@/components/godui/magnetic-button\";\n```\n\n```tsx\nGet started\n```\n\n### Variants\n\n```tsx\nDefault\nSecondary\nOutline\n```", "description": "A button whose content is magnetically pulled toward the cursor within a sensor range, springing back on exit.", "keywords": [ "magneticbutton", "size", "variant", "range", "componentpreview", "secondary", "label", "default", "classname", "button" ], "metadata": { "title": "Magnetic Button", "description": "A button whose content is magnetically pulled toward the cursor within a sensor range, springing back on exit.", "chunkIndex": 0, "totalChunks": 3, "sourcePath": "docs/components/buttons/magnetic-button.mdx" } }, { "id": "2dcde34c87b6d394", "url": "https://godui.design/docs/components/navigation/segmented-control", "title": "Segmented Control (Part 1)", "content": "import { SegmentedControl } from \"@godui/components\";\n\nexport const viewOptions = [\n { label: \"Day\", value: \"day\" },\n { label: \"Week\", value: \"week\" },\n { label: \"Month\", value: \"month\" },\n];\n\n;\n}`}\n>\n \n\n\n## Sizes\n\n\n \n \n \n \n );\n}`}\n>\n
\n \n \n \n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { SegmentedControl } from \"@godui/components\";\n\nconst [view, setView] = useState(\"week\");\n\n;\n```\n\n## Props", "description": "An iOS-style selector with a sliding pill that springs between options.", "keywords": [ "options", "value", "segmentedcontrol", "label", "week", "size", "viewoptions", "import", "from", "godui" ], "metadata": { "title": "Segmented Control", "description": "An iOS-style selector with a sliding pill that springs between options.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/navigation/segmented-control.mdx" } }, { "id": "2e0f899c4cbe2181", "url": "https://godui.design/docs/components/visualizations/animated-beam", "title": "Animated Beam (Part 1)", "content": "import { AnimatedBeamDemo } from \"@/components/demos/animated-beam-demo\";\nimport { AnimatedBeamPipelineDemo } from \"@/components/demos/animated-beam-pipeline-demo\";\nimport { AnimatedBeamSyncDemo } from \"@/components/demos/animated-beam-sync-demo\";\n\n\n
\n
\n \n
\n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`AnimatedBeam` renders an absolutely-positioned SVG over a container and draws a\nquadratic path between two child refs, measured live with a `ResizeObserver` and\non window resize. A travelling gradient animates along the path. Mount it as the\nlast child of a `relative` container that also holds `fromRef` and `toRef`.\n\n## Usage\n\n```tsx\nimport { AnimatedBeam } from \"@/components/godui/animated-beam\";\n\nconst containerRef = useRef(null);\nconst fromRef = useRef(null);\nconst toRef = useRef(null);\n```\n\n```tsx\n
\n
\n
\n \n
\n```\n\n## Examples\n\n### Dotted data pipeline\n\nSet `pathDashArray` for a dotted or dashed resting line. Here each stage connects\nwith a dotted track (`\"0.1 8\"` with the round cap renders as dots), and staggered\n`delay`s send the beam flowing from stage to stage.", "description": "An animated gradient beam that travels along a path connecting two separate nodes.", "keywords": [ "fromref", "toref", "containerref", "animatedbeam", "from", "useref", "const", "delay", "beam", "import" ], "metadata": { "title": "Animated Beam", "description": "An animated gradient beam that travels along a path connecting two separate nodes.", "chunkIndex": 0, "totalChunks": 3, "sourcePath": "docs/components/visualizations/animated-beam.mdx" } }, { "id": "2e141a8d0a23a147", "url": "https://godui.design/docs/components/glass/liquid-glass-lens", "title": "Liquid Glass Lens (Part 2)", "content": "
\n {/* ...images, text, any page content... */}\n \n
\n```\n\n### Sizing\n\n`size` is the lens diameter in px. Bump `strength` for a stronger magnify.\n\n```tsx\n\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------ | -------- | ----------------------- | ----------------------------------------------------------- |\n| `size` | `number` | `160` | Diameter of the circular lens in px. |\n| `blur` | `number` | `2` | Frost (backdrop blur) in px. |\n| `strength` | `number` | `80` | Refraction displacement scale — how hard the lens bends. |\n| `dispersion` | `number` | `0.15` | Chromatic aberration, `0`–`1`. Splits the R/G/B refraction. |\n| `saturation` | `number` | `1.6` | Backdrop saturation multiplier. |\n| `tint` | `string` | `rgba(255,255,255,.08)` | Glass tint color. |\n| `sheen` | `number` | `0.5` | Specular highlight intensity, `0`–`1`. |\n\n`LiquidGlassLens` also forwards every standard `
` attribute (`className`,\n`style`, `id`, …) to the root element.", "description": "A circular glass lens that floats over your content and follows the cursor, refracting everything beneath it.", "keywords": [ "liquidglasslens", "classname", "glass", "size", "number", "strength", "lens", "components", "relative", "content" ], "metadata": { "title": "Liquid Glass Lens", "description": "A circular glass lens that floats over your content and follows the cursor, refracting everything beneath it.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/glass/liquid-glass-lens.mdx" } }, { "id": "2e934243fd03b818", "url": "https://godui.design/docs/components/effects/image-trail", "title": "Image Trail (Part 2)", "content": "| Prop | Type | Default | Description |\n| ----------- | ---------- | ------- | ------------------------------------------------------------ |\n| `images` | `string[]` | — | Images cycled through as the pointer moves. |\n| `threshold` | `number` | `64` | Minimum pointer distance (px) between two spawned images. |\n| `duration` | `number` | `750` | Lifespan of each trail image, in ms. |\n| `max` | `number` | `12` | Maximum images alive at once (the recycled DOM pool size). |\n| `size` | `number` | `180` | Width/height of each trail image, in px. |\n\n`ImageTrail` also forwards every standard `
` attribute to the root element.", "description": "Images spawn along the pointer's path, pop in, and drift away — the signature portfolio hover effect.", "keywords": [ "images", "imagetrail", "photos", "from", "pointer", "trail", "import", "components", "move", "cursor" ], "metadata": { "title": "Image Trail", "description": "Images spawn along the pointer's path, pop in, and drift away — the signature portfolio hover effect.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/effects/image-trail.mdx" } }, { "id": "2f32c65e2e4d25f6", "url": "https://godui.design/docs/components/effects/marquee", "title": "Marquee (Part 1)", "content": "import { Marquee } from \"@godui/components\";\nimport { MarqueeDemo } from \"@/components/demos/marquee-demo\";\n\n\n

Trusted by fast-moving teams

\n \n {logos.map((name) => (\n {name}\n ))}\n \n
\n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`Marquee` duplicates its children into a seamless looping track. The animation is\npure CSS, so it stays smooth even with many items, and respects\n`prefers-reduced-motion`.\n\n## Usage\n\n```tsx\nimport { Marquee } from \"@/components/godui/marquee\";\n```\n\n```tsx\n\n {items.map((item) => (\n \n ))}\n\n```\n\n### Direction\n\n`\"left\"` / `\"right\"` scroll horizontally; `\"up\"` / `\"down\"` scroll vertically (give\nthe marquee a fixed height).\n\n```tsx\n\n\n```\n\n### Speed\n\n`speed` is the loop duration in seconds — higher is slower.\n\n```tsx\n\n```\n\n## Examples\n\n### Reverse direction", "description": "An infinite, seamless scrolling row or column of content that pauses on hover.", "keywords": [ "marquee", "classname", "direction", "speed", "componentpreview", "text-muted-foreground", "span", "right", "import", "from" ], "metadata": { "title": "Marquee", "description": "An infinite, seamless scrolling row or column of content that pauses on hover.", "chunkIndex": 0, "totalChunks": 3, "sourcePath": "docs/components/effects/marquee.mdx" } }, { "id": "2fe6ba762772d252", "url": "https://godui.design/docs/components/effects/fluid-cursor", "title": "Fluid Cursor (Part 1)", "content": "import { FluidCursor } from \"@godui/components\";\nimport { FluidCursorDemo } from \"@/components/demos/fluid-cursor-demo\";\n\n\n {/* your content */}\n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nA leading dot springs after the pointer with a softer smear trailing behind, both\ninverting whatever is underneath via `mix-blend-mode: difference`. It swells over\nlinks, buttons, and anything marked `data-cursor`. The cursor disables itself on\ntouch devices and under `prefers-reduced-motion`, so it never strands users\nwithout a pointer.\n\n## Usage\n\n```tsx\nimport { FluidCursor } from \"@/components/godui/fluid-cursor\";\n```\n\n**Global** — drop it once near the root for a page-wide cursor. Hide the system\ncursor with `cursor: none` where you want it to take over:\n\n```tsx\n\n```\n\n**Scoped** — pass a `containerRef` (the element must be positioned) to confine it\nto one region, e.g. a hero or a card:\n\n```tsx\nconst ref = useRef(null);\n\n
\n {/* content */}\n \n
;\n```\n\n## Props", "description": "A spring-lagged blend-mode cursor that trails the pointer and swells over interactive elements.", "keywords": [ "fluidcursor", "cursor", "import", "from", "components", "containerref", "godui", "fluidcursordemo", "useref", "null" ], "metadata": { "title": "Fluid Cursor", "description": "A spring-lagged blend-mode cursor that trails the pointer and swells over interactive elements.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/effects/fluid-cursor.mdx" } }, { "id": "30470c7933fac858", "url": "https://godui.design/docs/components/index", "title": "Components (Part 1)", "content": "import { Cards } from \"fumadocs-ui/components/card\";\n\n## Buttons\n\n\n \n A floating action button that gooey-morphs to extrude its satellite actions\n like liquid metaballs.\n \n \n Press and hold to confirm a destructive action — a radial fill commits at\n 100%, releasing early cancels.\n \n \n A pushable 3D button with rainbow edge animation and solid front face.\n \n \n A button whose content is magnetically pulled toward the cursor, springing\n back on exit.\n \n \n A button whose face wipes away on hover via an animated CSS sprite-sheet\n mask, revealing the label behind it.\n \n \n A 3D button whose front face folds back to reveal a controlled progress bar\n while loading.\n \n \n A button with an animated shimmering border light effect.\n \n \n A drag-to-confirm thumb for high-stakes actions — slide past the threshold\n to commit, release early to spring back.\n \n\n\n## Inputs", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 0, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "34233b5250028230", "url": "https://godui.design/docs/components/overlays/floating-toolbar", "title": "Floating Toolbar", "content": "import { FloatingToolbar } from \"@godui/components\";\n\nexport const icon = (d) => (\n \n);\n\nexport const toolbarActions = [\n { icon: icon(\"M6 12h12M6 6h12M6 18h12\"), label: \"Align\", active: true },\n { icon: icon(\"M4 7V4h16v3M9 20h6M12 4v16\"), label: \"Text\" },\n { icon: icon(\"M21 15l-5-5L5 21\"), label: \"Image\" },\n { icon: icon(\"M3 6h18M3 12h18M3 18h18\"), label: \"List\" },\n];\n\n, label: \"Align\", active: true },\n { icon: , label: \"Text\" },\n { icon: , label: \"Image\" },\n ]}\n />\n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\nDrive `open` from a selection or hover state to spring the toolbar in and out.\n\n```tsx\nimport { FloatingToolbar } from \"@godui/components\";\n\nconst [open, setOpen] = useState(false);\n\n, label: \"Bold\", onClick: bold }]}\n/>;\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `actions` | `ToolbarAction[]` | — | `{ icon, label, onClick?, active?, disabled? }`. |\n| `open` | `boolean` | `true` | Mount/unmount with a spring entrance. |\n| `children` | `ReactNode` | — | Trailing content (dividers, extra controls). |", "description": "A context toolbar that springs into view with magnetic, morphing action buttons.", "keywords": [ "icon", "label", "open", "floatingtoolbar", "from", "true", "actions", "import", "godui", "components" ], "metadata": { "title": "Floating Toolbar", "description": "A context toolbar that springs into view with magnetic, morphing action buttons.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/overlays/floating-toolbar.mdx" } }, { "id": "350645847967ef56", "url": "https://godui.design/docs/components/effects/particle-dissolve", "title": "Particle Dissolve (Part 2)", "content": "| Prop | Type | Default | Description |\n| -------------- | --------------------------------------- | -------------- | ---------------------------------------------------- |\n| `text` | `string` | — | Text to render as particles (ignored when `src` set).|\n| `src` | `string` | — | Image URL to sample into particles. |\n| `mode` | `\"assemble\" \\| \"disperse\" \\| \"loop\"` | `\"assemble\"` | Resting behaviour once triggered. |\n| `trigger` | `\"mount\" \\| \"in-view\" \\| \"hover\"` | `\"in-view\"` | When the animation starts. |\n| `density` | `number` | `4` | Pixel sampling step — smaller is denser. |\n| `particleSize` | `number` | `2` | Particle dot size in px. |\n| `color` | `string` | text color | Fill colour for text particles. |\n| `width` / `height` | `number` | `640` / `240` | Canvas size in CSS px. |\n\n`ParticleDissolve` also forwards every standard `` attribute.", "description": "Text or an image is sampled into particles that scatter and reform — a dramatic entrance or transition.", "keywords": [ "text", "particledissolve", "from", "import", "godui", "components", "particles", "mode", "loop", "trigger" ], "metadata": { "title": "Particle Dissolve", "description": "Text or an image is sampled into particles that scatter and reform — a dramatic entrance or transition.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/effects/particle-dissolve.mdx" } }, { "id": "35586f82684ff7d6", "url": "https://godui.design/docs/components/buttons/magnetic-button", "title": "Magnetic Button (Part 2)", "content": "\n Default\n Secondary\n Outline\n`}\n>\n
\n Default\n Secondary\n Outline\n
\n\n\n### Sizes\n\n\n Small\n Medium\n Large\n`}\n>\n
\n Small\n Medium\n Large\n
\n\n\n### Stronger pull and wider sensor\n\n`strength` controls how far the button follows the cursor (0–1); `range` adds\ninvisible padding so the pull engages before the pointer reaches the edge.\n\nPull me`}\n>\n Pull me\n\n\n### Keep the label centered\n\nBy default the label drifts a little further than the shell for parallax. Set\n`staticLabel` so the label rides with the button and stays centered — the whole\nbutton moves as one piece, with no drift.", "description": "A button whose content is magnetically pulled toward the cursor within a sensor range, springing back on exit.", "keywords": [ "magneticbutton", "size", "variant", "range", "componentpreview", "secondary", "label", "default", "classname", "button" ], "metadata": { "title": "Magnetic Button", "description": "A button whose content is magnetically pulled toward the cursor within a sensor range, springing back on exit.", "chunkIndex": 1, "totalChunks": 3, "sourcePath": "docs/components/buttons/magnetic-button.mdx" } }, { "id": "36b267d4fa44d311", "url": "https://godui.design/docs/components/effects/spotlight-reveal", "title": "Spotlight Reveal (Part 1)", "content": "import { SpotlightReveal } from \"@godui/components\";\nimport { SpotlightRevealDemo } from \"@/components/demos/spotlight-reveal-demo\";\n\nTwo 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.\n\n\n

You found it

\n \n }\n >\n
\n

Move your cursor

\n
\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nThe cover layer is masked with a feathered radial gradient whose centre is eased\ntoward the pointer in a single `requestAnimationFrame` loop — the lag gives the\nspotlight a liquid feel. When idle, the centre drifts in a slow ellipse.\n\n## Usage\n\n```tsx\nimport { SpotlightReveal } from \"@/components/godui/spotlight-reveal\";\n```\n\nPass the hidden layer to `reveal` and the cover layer as children.\n\n```tsx\n}>\n \n\n```\n\n### Tuning the light\n\n`radius` sizes the spotlight, `softness` feathers its edge, and `ease` controls\nhow much the light lags the cursor (lower = more lag).\n\n```tsx\n}>\n \n\n```\n\n## Accessibility", "description": "A cursor-following flashlight that cuts through the top layer to expose a hidden layer beneath.", "keywords": [ "spotlightreveal", "spotlight", "reveal", "layer", "classname", "import", "from", "components", "cover", "radius" ], "metadata": { "title": "Spotlight Reveal", "description": "A cursor-following flashlight that cuts through the top layer to expose a hidden layer beneath.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/effects/spotlight-reveal.mdx" } }, { "id": "3a0460949764d1f7", "url": "https://godui.design/docs/components/backgrounds/flow-field", "title": "Flow Field (Part 2)", "content": "\n \n \n );\n}`}\n>\n
\n \n
\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `particleCount` | `number` | `900` | Number of particles (auto-scaled to area). |\n| `noiseScale` | `number` | `0.0016` | Field scale — smaller is broader/smoother. |\n| `speed` | `number` | `1` | Flow speed multiplier. |\n| `color` | `string` | `--color-primary` | Trail color. |\n| `fade` | `number` | `0.06` | Trail fade per frame, `0`–`1` (lower = longer trails). |\n\nAlso accepts standard `div` attributes (e.g. `className`, `style`).", "description": "Particles streaming along an evolving noise vector field, leaving silky fading trails.", "keywords": [ "classname", "flowfield", "relative", "fade", "from", "overflow-hidden", "number", "import", "godui", "components" ], "metadata": { "title": "Flow Field", "description": "Particles streaming along an evolving noise vector field, leaving silky fading trails.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/backgrounds/flow-field.mdx" } }, { "id": "3b2bb8d4549cefb6", "url": "https://godui.design/docs/components/text/highlighter", "title": "Highlighter (Part 4)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `children` | `ReactNode` | — | Inline text to annotate |\n| `action` | `\"highlight\" \\| \"underline\" \\| \"box\" \\| \"circle\" \\| \"strike-through\" \\| \"crossed-off\" \\| \"bracket\"` | `\"highlight\"` | Annotation style |\n| `color` | `string` | `\"#ffd1dc\"` | Annotation color (any CSS color string) |\n| `strokeWidth` | `number` | `1.5` | Stroke width of the annotation |\n| `animationDuration` | `number` | `600` | Draw-in animation duration in milliseconds |\n| `iterations` | `number` | `2` | Number of sketch passes (higher = more hand-drawn) |\n| `padding` | `number` | `2` | Gap between the text and the annotation |\n| `multiline` | `boolean` | `true` | Allow the annotation to wrap across lines |\n| `isView` | `boolean` | `false` | Defer the animation until scrolled into view |\n\n## Accessibility\n\nThe annotation is a decorative SVG overlay; it does not alter the text content,\nso the underlying text remains fully readable and selectable by screen readers.", "description": "Draw hand-drawn sketch annotations over inline text — highlight, underline, box, circle, and more. Powered by Rough Notation.", "keywords": [ "highlighter", "action", "color", "highlight", "underline", "text", "circle", "strike-through", "crossed-off", "bracket" ], "metadata": { "title": "Highlighter", "description": "Draw hand-drawn sketch annotations over inline text — highlight, underline, box, circle, and more. Powered by Rough Notation.", "chunkIndex": 3, "totalChunks": 4, "sourcePath": "docs/components/text/highlighter.mdx" } }, { "id": "3c662c9947621dab", "url": "https://godui.design/docs/components/ai/source-citations", "title": "Source Citations (Part 1)", "content": "import { SourceCitationsDemo } from \"@/components/demos/source-citations-demo\";\n\n\n

\n Design systems standardize on OKLCH\n and Tailwind v4\n .\n

\n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`SourceCitation` renders a compact numbered pill inline with text; on hover or\nfocus it springs out a preview card with the hostname, title, and snippet.\n`SourceList` renders the full source set as a footer, optionally collapsed\nbehind a **+N more** toggle.\n\n## Usage\n\n```tsx\nimport {\n SourceCitation,\n SourceList,\n} from \"@/components/godui/source-citations\";\n```\n\n```tsx\n

\n Answer text.\n

\n\n```\n\n## Props\n\n### SourceCitation\n\n| Prop | Type | Default | Description |\n| -------- | ---------------- | ------- | ---------------------------- |\n| `index` | `number` | — | Number rendered in the pill. |\n| `source` | `CitationSource` | — | Title, url, snippet, favicon.|\n\n### SourceList", "description": "Inline numbered citation pills that spring out a rich preview card on hover, plus a collapsible source list for AI answers.", "keywords": [ "sources", "sourcecitation", "sourcelist", "source", "title", "index", "import", "sourcecitationsdemo", "from", "components" ], "metadata": { "title": "Source Citations", "description": "Inline numbered citation pills that spring out a rich preview card on hover, plus a collapsible source list for AI answers.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/ai/source-citations.mdx" } }, { "id": "3ed2b0b5294ad8e1", "url": "https://godui.design/docs/components/backgrounds/gradient-background", "title": "Gradient Background", "content": "A full-bleed gradient layer. Drop it as the first child of a `relative overflow-hidden`\ncontainer and your content sits above it. Pick a look below — 48 gradients ported from\n[PatternCraft](https://patterncraft.fun). The component itself just takes `background`,\n`backgroundImage`, and `backgroundSize`; the picker fills them in.\n\n\n\n## Usage\n\n```tsx\nimport { GradientBackground } from \"@/components/godui/gradient-background\";\n\n
\n \n \n
\n```\n\n## Props\n\nThe component bakes the selected variant's full style. It takes no custom props —\njust the standard `div` attributes.\n\n| Prop | Type | Description |\n| ---- | ---- | ----------- |\n| `style` | `CSSProperties` | Supply your own background. Setting any background key (`background`, `backgroundImage`, `backgroundColor`, …) replaces the baked default entirely. |\n| `className` | `string` | Extra classes on the layer (it is `absolute inset-0 z-base`). |\n\nAll other `div` attributes are forwarded.", "description": "Full-bleed gradient backgrounds — radial glows, aurora washes, and depth fades.", "keywords": [ "background", "component", "gradient", "layer", "relative", "overflow-hidden", "your", "from", "patterncraft", "just" ], "metadata": { "title": "Gradient Background", "description": "Full-bleed gradient backgrounds — radial glows, aurora washes, and depth fades.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/backgrounds/gradient-background.mdx" } }, { "id": "3fc9a32aa0a0a51b", "url": "https://godui.design/docs/components/backgrounds/pixel-grid", "title": "Pixel Grid (Part 2)", "content": "export function PixelGridCursor() {\n return (\n
\n \n

Move your cursor across the grid

\n
\n );\n}`}\n>\n
\n \n

Move your cursor across the grid

\n
\n\n\n### Cursor reveal over a dim field\n\n`cursorReveal=\"dim\"` keeps the squares outside the radius visible at a static low\nopacity, so the cursor lights up an already-present grid.\n\n\n \n

Move your cursor across the grid

\n \n );\n}`}\n>\n
\n \n

Move your cursor across the grid

\n
\n\n\n### Custom color\n\nPass any CSS color string to `color` to override the theme token.\n\n void` | — | Fires on click; flip `status` from here to start loading |", "description": "A 3D button whose front face folds back to reveal a controlled progress bar while loading.", "keywords": [ "progressfoldbutton", "loading", "status", "from", "import", "componentpreview", "submit", "progress", "size", "godui" ], "metadata": { "title": "Progress Fold Button", "description": "A 3D button whose front face folds back to reveal a controlled progress bar while loading.", "chunkIndex": 2, "totalChunks": 3, "sourcePath": "docs/components/buttons/progress-fold-button.mdx" } }, { "id": "49dc18ee3a0bf937", "url": "https://godui.design/docs/components/effects/liquid-image", "title": "Liquid Image (Part 2)", "content": "When `prefers-reduced-motion` is set — or if SVG `filter: url()` is unavailable —\n`LiquidImage` falls back to a gentle CSS scale-and-brighten on hover, so the\ncomponent degrades cleanly. Always pass a meaningful `alt`.\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------- | ---------------------- | --------- | ------------------------------------------------------------ |\n| `src` | `string` | — | Image source. |\n| `alt` | `string` | — | Accessible description of the image. |\n| `strength` | `number` | `28` | Peak ripple displacement on interaction, in px. |\n| `frequency` | `number` | `0.012` | Turbulence frequency — smaller gives larger, smoother ripples. |\n| `trigger` | `\"hover\" \\| \"always\"` | `\"hover\"` | When the ripple is active. |\n| `imgClassName`| `string` | — | Classes for the inner `` (sizing, aspect, object-fit). |\n\n`LiquidImage` also forwards every standard `
` attribute to the root element.", "description": "A premium hover effect that ripples and distorts an image like liquid, intensifying with cursor speed.", "keywords": [ "liquidimage", "ripple", "hover", "image", "classname", "always", "import", "from", "components", "mountain" ], "metadata": { "title": "Liquid Image", "description": "A premium hover effect that ripples and distorts an image like liquid, intensifying with cursor speed.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/effects/liquid-image.mdx" } }, { "id": "4cf9294d3cf46891", "url": "https://godui.design/docs/components/index", "title": "Components (Part 4)", "content": "## Overlays\n\n\n \n A tooltip that springs in and tilts in 3D as the pointer moves across its\n trigger.\n \n \n A ⌘K command menu with fuzzy filtering, keyboard navigation, and spring\n enter / exit.\n \n \n A draggable bottom sheet with rubber-band physics, snap points, and\n flick-to-dismiss.\n \n \n An Apple-inspired pill that springs between size presets while its content\n cross-fades.\n \n \n A context toolbar that springs into view with magnetic, morphing action\n buttons.\n \n \n A card that physically morphs into a modal through a shared layout, then\n springs back on close.\n \n \n Stacked, swipe-dismissible toasts with an imperative `toast()` API.\n \n\n\n## Layout", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 3, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "4f45d7e85c8d3230", "url": "https://godui.design/docs/components/visualizations/animated-beam", "title": "Animated Beam (Part 2)", "content": "\n\n`}\n>\n \n\n\n### Bidirectional sync\n\nStack two dashed beams with opposite `curvature` — and `reverse` on one — for a\ncontinuous two-way connection.\n\n\n`}\n>\n \n\n\n## Props", "description": "An animated gradient beam that travels along a path connecting two separate nodes.", "keywords": [ "fromref", "toref", "containerref", "animatedbeam", "from", "useref", "const", "delay", "beam", "import" ], "metadata": { "title": "Animated Beam", "description": "An animated gradient beam that travels along a path connecting two separate nodes.", "chunkIndex": 1, "totalChunks": 3, "sourcePath": "docs/components/visualizations/animated-beam.mdx" } }, { "id": "50b4bba6e016fcbd", "url": "https://godui.design/docs/components/ai/source-citations", "title": "Source Citations (Part 2)", "content": "| Prop | Type | Default | Description |\n| -------------- | ------------------ | ------- | ------------------------------------ |\n| `sources` | `CitationSource[]` | — | Sources to list. |\n| `collapsible` | `boolean` | `true` | Collapse extras behind a toggle. |\n| `previewCount` | `number` | `3` | Shown before **+N more**. |", "description": "Inline numbered citation pills that spring out a rich preview card on hover, plus a collapsible source list for AI answers.", "keywords": [ "sources", "sourcecitation", "sourcelist", "source", "title", "index", "import", "sourcecitationsdemo", "from", "components" ], "metadata": { "title": "Source Citations", "description": "Inline numbered citation pills that spring out a rich preview card on hover, plus a collapsible source list for AI answers.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/ai/source-citations.mdx" } }, { "id": "51b21f53105470d0", "url": "https://godui.design/docs/components/effects/marquee", "title": "Marquee (Part 3)", "content": "| Prop | Type | Default | Description |\n| -------------- | ---------------------------------------- | -------- | --------------------------------------------------- |\n| `direction` | `\"left\" \\| \"right\" \\| \"up\" \\| \"down\"` | `\"left\"` | Scroll direction. |\n| `speed` | `number` | `40` | Loop duration in seconds — higher is slower. |\n| `pauseOnHover` | `boolean` | `true` | Pause while the pointer is over the marquee. |\n| `fade` | `boolean` | `true` | Fade the leading and trailing edges. |\n| `repeat` | `number` | `4` | Times the children are duplicated to fill the track.|\n\n`Marquee` also forwards every standard `
` attribute to the root element.", "description": "An infinite, seamless scrolling row or column of content that pauses on hover.", "keywords": [ "marquee", "classname", "direction", "speed", "componentpreview", "text-muted-foreground", "span", "right", "import", "from" ], "metadata": { "title": "Marquee", "description": "An infinite, seamless scrolling row or column of content that pauses on hover.", "chunkIndex": 2, "totalChunks": 3, "sourcePath": "docs/components/effects/marquee.mdx" } }, { "id": "534013fc8795dfcd", "url": "https://godui.design/docs/components/navigation/dock", "title": "Dock (Part 2)", "content": "| Prop | Type | Default | Description |\n| --------------- | -------- | ------- | ---------------------------------------------------- |\n| `baseSize` | `number` | `44` | Resting size of each item in pixels. |\n| `magnification` | `number` | `72` | Maximum magnified size in pixels at the pointer. |\n| `distance` | `number` | `140` | Pointer distance over which items are affected. |\n\n### DockItem\n\n| Prop | Type | Default | Description |\n| ------- | ----------- | ------- | -------------------------------------- |\n| `label` | `ReactNode` | — | Label shown above the item on hover. |\n\nBoth components forward every standard `
` attribute to their root element.\n`DockItem` must be rendered inside a `Dock`.", "description": "A macOS-style dock whose items magnify with spring physics as the pointer moves across them.", "keywords": [ "label", "dock", "dockitem", "color", "icon", "from", "import", "components", "home", "search" ], "metadata": { "title": "Dock", "description": "A macOS-style dock whose items magnify with spring physics as the pointer moves across them.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/navigation/dock.mdx" } }, { "id": "53516a9480605d2e", "url": "https://godui.design/docs/components/layout/image-accordion", "title": "Image Accordion (Part 2)", "content": "`activeGrow` sets how much wider the open panel becomes; `height` and\n`defaultIndex` control the band height and which panel starts open.\n\n```tsx\n\n```\n\n## Accessibility\n\nEach panel is a real button (or anchor) with `aria-expanded`. Tabbing focuses a\npanel and opens it, so the component is fully keyboard navigable. When\n`prefers-reduced-motion` is set, transitions are removed and panels switch\ninstantly.\n\n## Props\n\n| Prop | Type | Default | Description |\n| -------------- | ----------------------- | --------- | -------------------------------------------------------- |\n| `panels` | `ImageAccordionPanel[]` | — | Panels, left to right. 3–6 works best. |\n| `defaultIndex` | `number` | `0` | Index of the panel open by default. |\n| `activeGrow` | `number` | `5` | How much wider the active panel grows vs. the others. |\n| `height` | `string` | `\"26rem\"` | Height of the accordion (any CSS length). |\n\nEach `ImageAccordionPanel` has `image`, `title`, optional `description`, and optional `href`.", "description": "Horizontal image panels that expand on hover to reveal their caption — an elegant, space-efficient gallery.", "keywords": [ "panel", "panels", "image", "title", "description", "imageaccordion", "height", "import", "from", "components" ], "metadata": { "title": "Image Accordion", "description": "Horizontal image panels that expand on hover to reveal their caption — an elegant, space-efficient gallery.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/image-accordion.mdx" } }, { "id": "5360177f80d21bdb", "url": "https://godui.design/docs/components/text/text-animate", "title": "Text Animate (Part 3)", "content": "export function TextAnimateHeading() {\n return (\n \n Hero headline\n \n );\n}`}\n>\n \n Hero headline\n \n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `children` | `string` | — | Text content to animate |\n| `animation` | `\"fadeIn\" \\| \"blurIn\" \\| \"blurInUp\" \\| \"blurInDown\" \\| \"slideUp\" \\| \"slideDown\" \\| \"slideLeft\" \\| \"slideRight\" \\| \"scaleUp\" \\| \"scaleDown\"` | `\"fadeIn\"` | Entrance animation preset |\n| `by` | `\"text\" \\| \"word\" \\| \"character\" \\| \"line\"` | `\"word\"` | How to split text for staggering |\n| `as` | `\"p\" \\| \"h1\"–\"h6\" \\| \"span\" \\| \"div\" \\| …` | `\"p\"` | Root element to render |\n| `delay` | `number` | `0` | Delay before animation starts (seconds) |\n| `duration` | `number` | `0.3` | Total animation duration; also drives default stagger when `stagger` is omitted |\n| `stagger` | `number` | derived | Delay between each segment |\n| `startOnView` | `boolean` | `true` | Animate when the element enters the viewport |\n| `once` | `boolean` | `true` | Animate only the first time it enters view, then never again |\n| `viewportAmount` | `number \\| \"some\" \\| \"all\"` | `0.3` | How much of the element must be visible to trigger |\n| `accessible` | `boolean` | `true` | Screen-reader text with `aria-hidden` on animated segments |\n| `className` | `string` | — | Classes on the root element |\n| `segmentClassName` | `string` | — | Classes on each animated segment |\n| `variants` | `Variants` | — | Custom Framer Motion item variants |\n\nRespects `prefers-reduced-motion` — text renders immediately without animation when the user has reduced motion enabled.", "description": "Staggered entrance animations for headlines and copy, split by word, character, or line.", "keywords": [ "textanimate", "animation", "classname", "word", "componentpreview", "character", "from", "tracking-tight", "text-4xl", "import" ], "metadata": { "title": "Text Animate", "description": "Staggered entrance animations for headlines and copy, split by word, character, or line.", "chunkIndex": 2, "totalChunks": 3, "sourcePath": "docs/components/text/text-animate.mdx" } }, { "id": "54dbdb197ac94e94", "url": "https://godui.design/docs/components/layout/reorder-list", "title": "Reorder List (Part 1)", "content": "import { ReorderList, ReorderItem } from \"@godui/components\";\nimport { ReorderListDemo } from \"@/components/demos/reorder-list-demo\";\n\n\n {items.map((item) => (\n \n {item.label}\n \n ))}\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nBuilt on Motion's drag-to-reorder primitives: grabbing an item lifts and scales\nit, and the rest of the list springs around it in real time. Works with pointer\nand touch, and the grab lift is skipped under `prefers-reduced-motion`.\n\n## Usage\n\n```tsx\nimport { ReorderList, ReorderItem } from \"@/components/godui/reorder-list\";\n```\n\nHold `values` in state and pass the matching `setState` as `onReorder`. Each\n`ReorderItem` takes the `value` it represents — use a stable `key`.\n\n```tsx\n\n {items.map((item) => (\n \n {item.label}\n \n ))}\n\n```\n\nSet `axis=\"x\"` for a horizontal list.\n\n## Props\n\n### ReorderList", "description": "A drag-to-reorder list where items lift on grab, spring to place, and neighbours flow around them.", "keywords": [ "item", "reorderlist", "reorderitem", "values", "items", "import", "from", "components", "label", "value" ], "metadata": { "title": "Reorder List", "description": "A drag-to-reorder list where items lift on grab, spring to place, and neighbours flow around them.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/reorder-list.mdx" } }, { "id": "56dda13b8729c0e2", "url": "https://godui.design/docs/components/effects/marquee", "title": "Marquee (Part 2)", "content": "\n {[\"Design\", \"Engineering\", \"Motion\", \"Craft\", \"Detail\", \"Systems\"].map((t) => (\n {t}\n ))}\n
`}\n>\n \n {[\"Design\", \"Engineering\", \"Motion\", \"Craft\", \"Detail\", \"Systems\"].map((t) => (\n {t}\n ))}\n \n\n\n### Vertical\n\nGive a vertical marquee a fixed height; it scrolls along the column.\n\n\n \n {reviews.map((r) => (\n
{r}
\n ))}\n \n`}\n>\n
\n \n {[\"Smoothest UI all year\", \"Spring physics done right\", \"It just worked\", \"Feels premium\", \"Shipped in a day\"].map((r) => (\n
{r}
\n ))}\n \n
\n\n\n## Props", "description": "An infinite, seamless scrolling row or column of content that pauses on hover.", "keywords": [ "marquee", "classname", "direction", "speed", "componentpreview", "text-muted-foreground", "span", "right", "import", "from" ], "metadata": { "title": "Marquee", "description": "An infinite, seamless scrolling row or column of content that pauses on hover.", "chunkIndex": 1, "totalChunks": 3, "sourcePath": "docs/components/effects/marquee.mdx" } }, { "id": "5db6636bfad86c8b", "url": "https://godui.design/docs/components/layout/progressive-card-reveal", "title": "Progressive Card Reveal (Part 1)", "content": "import { ProgressiveCardRevealDemo } from \"@/components/demos/progressive-card-reveal-demo\";\n\nA vertical stack of cards. Exactly one card is expanded at a time — the rest\ncollapse to compact pills. The parent owns which card is active; clicking a\ncollapsed pill asks it to switch, and Framer Motion animates the size morph and\ncrossfades the content.\n\n\n Animate your ideas into reality\n \n );\n}`}\n>\n \n Animate your ideas into reality\n \n\n\n### Character stagger\n\n\n Character by character\n \n );\n}`}\n>\n \n Character by character\n \n\n\n### Scale up\n\n\n Scale up with spring\n \n );\n}`}\n>\n \n Scale up with spring\n \n\n\n### Slide from the right\n\n\n Slide from the right\n \n );\n}`}\n>\n \n Slide from the right\n \n\n\n### Semantic heading\n\nRender a real `h1` with `as` while keeping the staggered entrance.\n\n(\"idle\");\n\n const handleClick = async () => {\n setStatus(\"loading\");\n await doWork();\n setStatus(\"idle\");\n };\n\n return (\n \n Submit\n \n );\n}\n```\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { ProgressFoldButton } from \"@/components/godui/progress-fold-button\";\n```\n\n```tsx\n\n Submit\n\n```\n\n## Examples\n\n### Sizes\n\n\n Small\n Medium\n Large\n \n );\n}`}\n>\n
\n Small\n Medium\n Large\n
\n\n\n### Disabled\n\nSubmit;\n}`}\n>\n Submit\n\n\n## Props\n\nAccepts all native `\n \n
    \n {lines.map((item) => (\n
  • \n {item.name}\n {item.price}\n
    • \n ))}\n
\n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`Drawer` is a controlled, portalled sheet. Drag the handle down (or flick) past the\nthreshold to dismiss; it also closes on scrim click and `Escape`, and locks body\nscroll while open. Use `side=\"right\"` for a side panel.\n\n## Usage\n\n```tsx\n\"use client\";\nimport { Drawer } from \"@/components/godui/drawer\";\nimport { useState } from \"react\";\n\nexport function Example() {\n const [open, setOpen] = useState(false);\n return (\n <>\n \n \n

Drawer content

\n \n \n );\n}\n```\n\n## Examples\n\n### Bottom sheet", "description": "A draggable bottom sheet with rubber-band physics, snap points, and flick-to-dismiss.", "keywords": [ "drawer", "open", "setopen", "side", "from", "import", "button", "classname", "title", "bottom" ], "metadata": { "title": "Drawer", "description": "A draggable bottom sheet with rubber-band physics, snap points, and flick-to-dismiss.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/overlays/drawer.mdx" } }, { "id": "63db04c57d608796", "url": "https://godui.design/docs/components/text/highlighter", "title": "Highlighter (Part 2)", "content": "Wrap any inline text. The annotation is drawn over the element on mount.\n\n```tsx\n

\n The quick brown fox jumps over the lazy dog.\n

\n```\n\n### Actions\n\n```tsx\nhighlight\nunderline\nbox\ncircle\nstrike-through\ncrossed-off\nbracket\n```\n\nThe `highlight` action paints a pale marker behind the text and renders it in\ndark ink — like a real highlighter pen — so it stays legible in both light and\ndark mode. The other actions draw around the text and keep the inherited color.\n\n### Animate on scroll\n\nSet `isView` to defer the draw-in animation until the element scrolls into view.\n\n```tsx\n\n Reveals as you scroll\n\n```\n\n### Tuning the sketch\n\n```tsx\n\n Bolder, looser, slower\n\n```\n\n## Examples\n\n### In a sentence\n\nDrop it around any inline word — the sketch draws over the text in place.\n\n\n Start free\n \n }\n />\n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { ResizableHeader } from \"@/components/godui/resizable-header\";\n```\n\n```tsx\nconst links = [\n { label: \"Product\", href: \"/product\" },\n { label: \"Pricing\", href: \"/pricing\" },\n { label: \"Docs\", href: \"/docs\" },\n];\n\n;\n```\n\nBy default the header tracks window scroll. To track a scroll container instead\n(as in the preview above), pass a `scrollRef`:\n\n```tsx\nconst scrollRef = useRef(null);\n\n
\n \n {/* content */}\n
;\n```\n\n## Props", "description": "A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator.", "keywords": [ "links", "href", "label", "scrollref", "resizableheader", "product", "import", "from", "const", "pricing" ], "metadata": { "title": "Resizable Header", "description": "A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/navigation/resizable-header.mdx" } }, { "id": "6cb14fb49aaea0fd", "url": "https://godui.design/docs/components/buttons/slide-confirm-button", "title": "Slide Confirm Button", "content": "import { SlideConfirmButton } from \"@godui/components\";\n\nThe Slide Confirm Button is the most deliberate confirmation gesture: drag the thumb across the track, the fill trails behind it, and it snaps to confirm past the threshold. Pointer, touch, and keyboard are all supported.\n\n console.log(\"deployed\")}\n />\n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { SlideConfirmButton } from \"@/components/godui/slide-confirm-button\";\n```\n\n```tsx\n\n```\n\n## Examples\n\n### Destructive\n\n;\n}`}\n>\n \n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `onConfirm` | `() => void` | — | Fires once the thumb passes the threshold |\n| `variant` | `\"default\" \\| \"destructive\"` | `\"default\"` | Visual style |\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Track and thumb size |\n| `threshold` | `number` | `0.9` | Fraction of the track (0–1) required to confirm |\n| `label` | `ReactNode` | `\"Slide to confirm\"` | Track label |\n| `confirmedLabel` | `ReactNode` | `\"Confirmed\"` | Label after confirming |", "description": "A drag-to-confirm thumb for high-stakes actions — slide past the threshold to commit, release early to spring back.", "keywords": [ "slideconfirmbutton", "label", "slide", "import", "from", "godui", "components", "confirm", "track", "componentpreview" ], "metadata": { "title": "Slide Confirm Button", "description": "A drag-to-confirm thumb for high-stakes actions — slide past the threshold to commit, release early to spring back.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/buttons/slide-confirm-button.mdx" } }, { "id": "6d28ca696db4a048", "url": "https://godui.design/docs/components/layout/bento-grid", "title": "Bento Grid (Part 1)", "content": "import { BentoGridDemo } from \"@/components/demos/bento-grid-demo\";\n\n\n }\n title=\"Interfaces that feel alive\"\n description=\"Spring-driven motion and pixel-tuned details, ready to drop in.\"\n />\n }\n title=\"Realtime analytics\"\n description=\"Every interaction streamed and charted as it happens.\"\n />\n }\n title=\"Enterprise-grade\"\n description=\"SOC 2 Type II, SSO, and audit logs out of the box.\"\n />\n }\n title=\"120ms p95 globally\"\n description=\"Served from 35 edge regions, close to every user.\"\n />\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`BentoGrid` lays out `BentoCard`s in a responsive grid. Cards stagger in with a spring\nas the grid scrolls into view, lift on hover, and reveal a pointer-tracked spotlight.\n\n## Usage\n\n```tsx\nimport { BentoGrid, BentoCard } from \"@/components/godui/bento-grid\";\n```\n\n```tsx\n\n \n \n \n\n```", "description": "A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover.", "keywords": [ "bentocard", "description", "bentogrid", "classname", "title", "span", "icon", "from", "iconwrap", "import" ], "metadata": { "title": "Bento Grid", "description": "A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/bento-grid.mdx" } }, { "id": "6d62185dd37ac3ba", "url": "https://godui.design/docs/components/visualizations/globe", "title": "Globe (Part 2)", "content": "```tsx\n\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| -------- | ----------------------- | ------- | ------------------------------------------------- |\n| `config` | `Partial` | — | Override any cobe option (markers, colors, glow). |\n\n`Globe` also forwards every standard `
` attribute to the root element.", "description": "A draggable, auto-rotating WebGL globe with glowing location markers.", "keywords": [ "globe", "config", "location", "size", "classname", "markers", "cobe", "import", "from", "components" ], "metadata": { "title": "Globe", "description": "A draggable, auto-rotating WebGL globe with glowing location markers.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/visualizations/globe.mdx" } }, { "id": "6ddfa32c305f36da", "url": "https://godui.design/docs/components/index", "title": "Components (Part 7)", "content": "\n \n A vertical timeline of agent steps with live status, a spring-filled\n connector, and collapsible tool output.\n \n \n A streaming chat surface — messages spring in, tokens reveal, and the view\n auto-sticks to the latest message.\n \n \n An AI input box with auto-grow, attachment chips, a model picker, and a\n send-to-stop morph while streaming.\n \n \n Animated starter prompts that stagger in, lift on hover, and feed straight\n into the composer.\n \n \n Inline citation pills that spring out a rich preview card, plus a\n collapsible source list.\n \n \n A Siri-style audio-reactive orb that breathes when idle, pulses while\n listening, and swells with the voice as it speaks.\n \n\n\n## Collaboration\n\n\n \n Figma-style annotation pins that spring in and expand into a threaded\n comment popover.\n \n \n Smoothly interpolated multiplayer cursors with name flags and optional\n cursor-chat.\n \n \n Live avatars with status rings and spring join/leave, plus a +N overflow\n that opens a presence list.\n \n\n\n## Visualizations", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 6, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "6e33b589974d2042", "url": "https://godui.design/docs/components/effects/confetti", "title": "Confetti", "content": "import { ConfettiDemo } from \"@/components/demos/confetti-demo\";\n\n\n Celebrate 🎉\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nA thin wrapper over [canvas-confetti](https://github.com/catdad/canvas-confetti).\n`ConfettiButton` bursts from its own position on click. For full control, render\n`Confetti` and hold a ref, or call the imperative `confetti()` from anywhere —\nmirroring the `toast()` ergonomics used elsewhere in GodUI.\n\n## Usage\n\n### Button\n\n```tsx\nimport { ConfettiButton } from \"@/components/godui/confetti\";\n```\n\n```tsx\n\n Celebrate 🎉\n\n```\n\n### Imperative ref\n\n```tsx\nimport { Confetti, type ConfettiHandle } from \"@/components/godui/confetti\";\n\nconst ref = useRef(null);\n```\n\n```tsx\n\n\n```\n\n### Direct call\n\n```tsx\nimport { confetti } from \"@/components/godui/confetti\";\n\nconfetti({ particleCount: 200, spread: 120 });\n```\n\n## Props\n\n### `ConfettiButton`\n\n| Prop | Type | Default | Description |\n| --------- | ----------------- | ------- | ---------------------------------------- |\n| `options` | `ConfettiOptions` | — | Confetti options applied on click. |\n\nForwards every standard `\n \n
\n \n );\n}`}\n>\n \n\n\n## Vertical\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage", "description": "A step indicator with a spring-filled progress line and a number-to-checkmark morph.", "keywords": [ "stepper", "steps", "label", "active", "description", "from", "import", "components", "componentpreview", "godui" ], "metadata": { "title": "Stepper", "description": "A step indicator with a spring-filled progress line and a number-to-checkmark morph.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/stepper.mdx" } }, { "id": "78baf5771fdcc1a3", "url": "https://godui.design/docs/components/backgrounds/pixel-grid", "title": "Pixel Grid (Part 1)", "content": "import { PixelGrid } from \"@godui/components\";\n\nA field of small squares that flicker their opacity on a loop. It has two modes.\nWith `interactive={false}` the whole field flickers on its own — an automatic\nanimated background. With `interactive`, only the squares within\n`interactionRadius` of the cursor animate; the rest are hidden or held at a\nstatic dim, depending on `cursorReveal`. Drop it as the first child of a\n`relative overflow-hidden` container; your content sits above it. The square\ncolor defaults to the `--color-foreground` theme token and re-resolves on theme\nchange, so it tracks light and dark automatically.\n\n\n \n \n );\n}`}\n>\n
\n \n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { PixelGrid } from \"@/components/godui/pixel-grid\";\n```\n\n`PixelGrid` is absolutely positioned and fills its nearest positioned ancestor,\nso that parent must be `relative`. Add `overflow-hidden` to keep the edges clean.\n\n```tsx\n
\n \n
\n```\n\n## Examples\n\n### Cursor reveal\n\nSet `interactive` so only the squares within `interactionRadius` of the cursor\nanimate. With the default `cursorReveal=\"hidden\"`, the rest stay invisible — a\nspotlight that follows the pointer.\n\n;\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `steps` | `Step[]` | — | `{ label, description? }`. |\n| `active` | `number` | — | Zero-based current step; earlier steps render complete. |\n| `orientation` | `\"horizontal\" \\| \"vertical\"` | `\"horizontal\"` | Layout direction. |", "description": "A step indicator with a spring-filled progress line and a number-to-checkmark morph.", "keywords": [ "stepper", "steps", "label", "active", "description", "from", "import", "components", "componentpreview", "godui" ], "metadata": { "title": "Stepper", "description": "A step indicator with a spring-filled progress line and a number-to-checkmark morph.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/stepper.mdx" } }, { "id": "7b964ba5e04884ab", "url": "https://godui.design/docs/components/buttons/hold-confirm-button", "title": "Hold Confirm Button (Part 2)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `onConfirm` | `() => void` | — | Fires once the hold completes |\n| `variant` | `\"destructive\" \\| \"default\"` | `\"destructive\"` | Visual style |\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Padding and text size |\n| `duration` | `number` | `900` | ms the user must hold to confirm |\n| `holdingLabel` | `ReactNode` | `\"Confirming…\"` | Label while holding |\n| `confirmedLabel` | `ReactNode` | `\"Confirmed\"` | Label after confirming |", "description": "Press and hold to confirm a destructive action — a radial fill commits at 100%, releasing early cancels.", "keywords": [ "holdconfirmbutton", "hold", "delete", "variant", "import", "from", "godui", "components", "componentpreview", "hold-confirm-button" ], "metadata": { "title": "Hold Confirm Button", "description": "Press and hold to confirm a destructive action — a radial fill commits at 100%, releasing early cancels.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/buttons/hold-confirm-button.mdx" } }, { "id": "7c9298136725dece", "url": "https://godui.design/docs/components/effects/border-beam", "title": "Border Beam (Part 3)", "content": "export function BorderBeamColored() {\n return (\n
\n

Custom gradient, thick border.

\n \n
\n );\n}`}\n>\n
\n

Custom gradient, thick border.

\n \n
\n\n\n### Dual beams\n\nRender two beams with opposite `delay` values for a continuous double chase.\n\n\n

Two beams chasing each other.

\n \n \n \n );\n}`}\n>\n
\n

Two beams chasing each other.

\n \n \n
\n\n\n## Props", "description": "An animated beam of light that travels around the border of its container.", "keywords": [ "borderbeam", "classname", "card", "relative", "overflow-hidden", "border", "size", "beam", "components", "import" ], "metadata": { "title": "Border Beam", "description": "An animated beam of light that travels around the border of its container.", "chunkIndex": 2, "totalChunks": 4, "sourcePath": "docs/components/effects/border-beam.mdx" } }, { "id": "7d7f0da32d977312", "url": "https://godui.design/docs/components/layout/card-swap", "title": "Card Swap (Part 2)", "content": "```tsx\n{/* cards */}\n```\n\n### Tuning the stack\n\n```tsx\n\n```\n\n## Accessibility\n\nThe previous/next controls are real buttons with labels. When\n`prefers-reduced-motion` is set, swaps are instant and the parallax tilt is\ndisabled.\n\n## Props\n\n| Prop | Type | Default | Description |\n| -------------- | --------- | -------- | ------------------------------------------------------ |\n| `interval` | `number` | `3500` | Auto-advance interval in ms. `0` disables it. |\n| `pauseOnHover` | `boolean` | `true` | Pause the auto-advance while the pointer is over it. |\n| `offsetY` | `number` | `28` | Vertical offset (px) between stacked cards. |\n| `offsetX` | `number` | `22` | Horizontal offset (px) between stacked cards. |\n| `scaleStep` | `number` | `0.06` | Scale removed per card going back. |\n\n`CardSwap` also forwards every standard `
` attribute to the root element.", "description": "A 3D stack of cards that cycles through a showcase loop, with pointer parallax and spring re-flow.", "keywords": [ "cardswap", "card", "stack", "from", "title", "every", "classname", "import", "components", "cards" ], "metadata": { "title": "Card Swap", "description": "A 3D stack of cards that cycles through a showcase loop, with pointer parallax and spring re-flow.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/card-swap.mdx" } }, { "id": "7ec805c47a9a4f6d", "url": "https://godui.design/docs/components/glass/liquid-glass-card", "title": "Liquid Glass Card (Part 1)", "content": "import { LiquidGlassCard } from \"@godui/components\";\n\n\n \n

Liquid Glass

\n

Move your cursor across the panel.

\n \n
\n );\n}`}\n>\n
\n \n

Liquid Glass

\n

Move your cursor across the panel.

\n \n
\n\n\n## Installation\n\n\n\n`LiquidGlassCard` wraps any content in a glass panel that refracts the live DOM\nbehind it. It builds a per-instance SVG displacement map sized to the panel and\napplies it through `backdrop-filter`, running the displacement at three scales to\nfringe color at the edges (chromatic aberration). A radial highlight tracks the\npointer and fades out when it leaves.\n\nTrue refraction requires `backdrop-filter: url()` (Chrome and Edge). In browsers\nwithout it the card gracefully falls back to a plain frosted blur, so it never\nrenders as a broken transparent box.\n\nFor a circular lens that follows the cursor over arbitrary content, see\n[Liquid Glass Lens](/docs/components/effects/liquid-glass-lens).\n\n## Usage", "description": "A glass panel that refracts the content behind it with a mouse-tracked specular highlight.", "keywords": [ "liquidglasscard", "classname", "glass", "number", "panel", "refraction", "components", "text-white", "content", "blur" ], "metadata": { "title": "Liquid Glass Card", "description": "A glass panel that refracts the content behind it with a mouse-tracked specular highlight.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/glass/liquid-glass-card.mdx" } }, { "id": "7ffc37bcb418b219", "url": "https://godui.design/docs/components/effects/spotlight-card", "title": "Spotlight Card (Part 2)", "content": "```tsx\n\n```\n\n## Examples\n\n### Single card\n\nA standalone surface — move the pointer across it to see the glow track and the\nborder light up.\n\n\n

Pointer-aware surface

\n

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

\n`}\n>\n \n

Pointer-aware surface

\n

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

\n \n\n\n### Custom glow color\n\n\n

Any color you like

\n

Pass any CSS color through glowColor.

\n`}\n>\n \n

Any color you like

\n

Pass any CSS color through glowColor.

\n \n\n\n### Border glow\n\nWith `border` enabled (the default), the same gradient is masked to the 1px ring,\nso the border itself lights up where the pointer is closest. Move along the edges.", "description": "A card with a radial spotlight glow that follows the pointer, optionally lighting the border.", "keywords": [ "classname", "spotlightcard", "border", "text-sm", "font-semibold", "text-foreground", "glowcolor", "oklch", "componentpreview", "glow" ], "metadata": { "title": "Spotlight Card", "description": "A card with a radial spotlight glow that follows the pointer, optionally lighting the border.", "chunkIndex": 1, "totalChunks": 3, "sourcePath": "docs/components/effects/spotlight-card.mdx" } }, { "id": "810c4920d2f6447b", "url": "https://godui.design/docs/components/visualizations/globe", "title": "Globe (Part 1)", "content": "import { GlobeDemo } from \"@/components/demos/globe-demo\";\n\n\n
\n

Deployed across every region on Earth

\n

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

\n
\n
\n \n
\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`Globe` renders a WebGL globe with [cobe](https://github.com/shuding/cobe), driven\nby a `requestAnimationFrame` loop. It auto-rotates while idle and hands rotation\nto the pointer on drag, picking up where the spin left off. Drag it to spin.\n\n## Usage\n\n```tsx\nimport { Globe } from \"@/components/godui/globe\";\n```\n\n```tsx\n\n```\n\n### Custom markers and colors\n\n`config` is merged over the defaults and accepts any\n[cobe option](https://github.com/shuding/cobe#props) — markers, arcs, colors, glow.", "description": "A draggable, auto-rotating WebGL globe with glowing location markers.", "keywords": [ "globe", "config", "location", "size", "classname", "markers", "cobe", "import", "from", "components" ], "metadata": { "title": "Globe", "description": "A draggable, auto-rotating WebGL globe with glowing location markers.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/visualizations/globe.mdx" } }, { "id": "81d87726cdca4d76", "url": "https://godui.design/docs/components/overlays/animated-tooltip", "title": "Animated Tooltip (Part 2)", "content": "| Prop | Type | Default | Description |\n| --------- | -------------------- | ------- | -------------------------------------------- |\n| `content` | `ReactNode` | — | Tooltip content shown on hover / focus. |\n| `side` | `\"top\" \\| \"bottom\"` | `\"top\"` | Which side of the trigger the tooltip shows. |\n| `children`| `ReactNode` | — | The trigger the tooltip is attached to. |\n\n`AnimatedTooltip` also forwards every standard `` attribute to the root element.", "description": "A tooltip that springs in and tilts in 3D as the pointer moves across its trigger.", "keywords": [ "animatedtooltip", "span", "classname", "name", "content", "role", "initials", "gradient", "trigger", "tooltip" ], "metadata": { "title": "Animated Tooltip", "description": "A tooltip that springs in and tilts in 3D as the pointer moves across its trigger.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/overlays/animated-tooltip.mdx" } }, { "id": "82c497c285062c0d", "url": "https://godui.design/docs/components/text/number-ticker", "title": "Number Ticker (Part 2)", "content": "| Prop | Type | Default | Description |\n| --------------- | ----------------- | ------- | ------------------------------------------------------------------ |\n| `value` | `number` | — | Target value the ticker animates to (or from, when counting down). |\n| `startValue` | `number` | `0` | Value the counter starts at. |\n| `direction` | `\"up\" \\| \"down\"` | `\"up\"` | `\"up\"` counts toward `value`; `\"down\"` counts from `value`. |\n| `delay` | `number` | `0` | Delay in seconds before the animation begins once in view. |\n| `decimalPlaces` | `number` | `0` | Number of decimal places to render. |\n| `damping` | `number` | `60` | Spring damping — higher is less bouncy. |\n| `stiffness` | `number` | `100` | Spring stiffness — higher is faster. |\n\n`NumberTicker` also forwards every standard `` attribute (`className`,\n`style`, `id`, …) to the root element.", "description": "Animates a number to its target value with spring physics when scrolled into view.", "keywords": [ "numberticker", "value", "number", "from", "down", "delay", "classname", "import", "godui", "components" ], "metadata": { "title": "Number Ticker", "description": "Animates a number to its target value with spring physics when scrolled into view.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/text/number-ticker.mdx" } }, { "id": "837bd1c401ecdce1", "url": "https://godui.design/docs/components/inputs/otp-input", "title": "OTP Input (Part 1)", "content": "import { OTPInput } from \"@godui/components\";\n\n console.log(code)} />;\n}`}\n>\n \n\n\n## Masked\n\nSet `mask` to render entered characters as dots — useful for sensitive codes.\n\n;\n}`}\n>\n \n\n\n## Validation status\n\n`status=\"error\"` shakes the row; `status=\"success\"` settles it. Flip back to\n`idle` to re-arm the shake.\n\n\n \n \n \n );\n}`}\n>\n
\n \n \n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { OTPInput } from \"@godui/components\";\n\n verify(code)} />;\n```\n\n## Props", "description": "A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake.", "keywords": [ "otpinput", "length", "code", "status", "componentpreview", "import", "from", "godui", "components", "defaultvalue" ], "metadata": { "title": "OTP Input", "description": "A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/inputs/otp-input.mdx" } }, { "id": "8500ce202eaef4e9", "url": "https://godui.design", "title": "GodUI — UI Collection for Modern Interfaces", "content": "[GodUI](/)[Components](/docs/components)[Animated Icons](https://svg-animated-icons.vercel.app/)\n\nSearch\n⌘K\n[](https://github.com/LucasBassetti/godui)\n\n[Actively building — star us on GitHub](https://github.com/LucasBassetti/godui)\n\n## UI Collection for Modern Interfaces\n\nAn open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui.\n\n[Browse Components](/docs/components)", "description": "An open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui.", "keywords": [ "components", "godui", "https", "github", "docs", "lucasbassetti", "collection", "motion", "animated", "icons" ], "metadata": { "chunkIndex": 0, "totalChunks": 1, "sourcePath": "/" } }, { "id": "862a89c9520146f4", "url": "https://godui.design/docs/components/effects/spotlight-reveal", "title": "Spotlight Reveal (Part 2)", "content": "Both layers are real DOM, so their text remains selectable and readable to\nassistive tech. When `prefers-reduced-motion` is set, the mask is dropped and\nthe cover simply sits at a calm, slightly transparent blend over the layer\nbeneath.\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------- | ------- | ------------------------------------------------------------ |\n| `reveal` | `React.ReactNode`| — | The hidden layer exposed under the spotlight. |\n| `radius` | `number` | `150` | Spotlight radius in px. |\n| `softness` | `number` | `0.55` | Edge feather, 0 (hard) – 1 (very soft). |\n| `ease` | `number` | `0.16` | Follow easing per frame, 0 (frozen) – 1 (instant). |\n\nThe cover layer is passed as `children`. `SpotlightReveal` also forwards every standard `
` attribute to the root element.", "description": "A cursor-following flashlight that cuts through the top layer to expose a hidden layer beneath.", "keywords": [ "spotlightreveal", "spotlight", "reveal", "layer", "classname", "import", "from", "components", "cover", "radius" ], "metadata": { "title": "Spotlight Reveal", "description": "A cursor-following flashlight that cuts through the top layer to expose a hidden layer beneath.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/effects/spotlight-reveal.mdx" } }, { "id": "86c3a66d292db3f0", "url": "https://godui.design/docs/components/backgrounds/effect-background", "title": "Effect Background", "content": "A full-bleed atmospheric layer. Drop it as the first child of a `relative overflow-hidden`\ncontainer and your content sits above it. Pick a look below — 66 patterns ported from\n[PatternCraft](https://patterncraft.fun). The component itself just takes `background`,\n`backgroundImage`, and `backgroundSize`; the picker fills them in.\n\n\n\n## Usage\n\n```tsx\nimport { EffectBackground } from \"@/components/godui/effect-background\";\n\n
\n \n \n
\n```\n\n## Props\n\nThe component bakes the selected variant's full style. It takes no custom props —\njust the standard `div` attributes.\n\n| Prop | Type | Description |\n| ---- | ---- | ----------- |\n| `style` | `CSSProperties` | Supply your own background. Setting any background key (`background`, `backgroundImage`, `backgroundColor`, …) replaces the baked default entirely. |\n| `className` | `string` | Extra classes on the layer (it is `absolute inset-0 z-base`). |\n\nAll other `div` attributes are forwarded.", "description": "Full-bleed effect backgrounds — radial glows, aurora dreams, and soft pastel washes.", "keywords": [ "background", "component", "layer", "relative", "overflow-hidden", "your", "from", "patterncraft", "just", "takes" ], "metadata": { "title": "Effect Background", "description": "Full-bleed effect backgrounds — radial glows, aurora dreams, and soft pastel washes.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/backgrounds/effect-background.mdx" } }, { "id": "878d4876ed42f369", "url": "https://godui.design/docs/components/layout/image-compare", "title": "Image Compare", "content": "import { ImageCompareDemo, ImageCompareVerticalDemo } from \"@/components/demos/image-compare-demo\";\n\n\n }\n after={\"After\"}\n />\n
\n );\n}`}\n>\n \n\n\n## Vertical\n\n\n }\n after={\"After\"}\n />\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { ImageCompare } from \"@godui/components\";\n\n}\n after={\"After\"}\n/>;\n```\n\nDrag the handle, or focus it and use the arrow keys (hold Shift for\nlarger steps).\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `before` | `ReactNode` | — | Content revealed on the left/top. |\n| `after` | `ReactNode` | — | Base content underneath. |\n| `initial` | `number` | `50` | Starting handle position (0–100). |\n| `orientation` | `\"horizontal\" \\| \"vertical\"` | `\"horizontal\"` | Drag axis. |\n| `beforeLabel` | `string` | — | Badge over the before layer. |\n| `afterLabel` | `string` | — | Badge over the after layer. |\n| `onChange` | `(position: number) => void` | — | Fires as the handle moves. |", "description": "A draggable before/after slider with clip-path reveal, keyboard support, and a pulsing handle hint.", "keywords": [ "before", "after", "imagecompare", "import", "from", "components", "componentpreview", "imagecomparedemo", "godui", "image-compare" ], "metadata": { "title": "Image Compare", "description": "A draggable before/after slider with clip-path reveal, keyboard support, and a pulsing handle hint.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/layout/image-compare.mdx" } }, { "id": "87b30b8ad532c3fc", "url": "https://godui.design/docs/components/buttons/gooey-fab", "title": "Gooey FAB (Part 2)", "content": "```tsx\n, onClick: edit },\n { label: \"Share\", icon: , onClick: share },\n ]}\n/>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `actions` | `GooeyFabAction[]` | — | Satellite actions (`icon`, `label`, `onClick`) |\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Trigger and satellite size |\n| `direction` | `\"up\" \\| \"down\" \\| \"left\" \\| \"right\"` | `\"up\"` | Direction the satellites extrude |\n| `open` | `boolean` | — | Controlled open state |\n| `defaultOpen` | `boolean` | `false` | Uncontrolled initial open state |\n| `onOpenChange` | `(open: boolean) => void` | — | Fires when the open state changes |\n| `triggerIcon` | `ReactNode` | plus → cross | Custom trigger icon |\n| `triggerLabel` | `string` | `\"Open actions\"` | Accessible trigger label |", "description": "A floating action button that gooey-morphs to extrude its satellite actions like liquid metaballs.", "keywords": [ "icon", "label", "round", "actions", "gooeyfab", "size", "open", "from", "trigger", "classname" ], "metadata": { "title": "Gooey FAB", "description": "A floating action button that gooey-morphs to extrude its satellite actions like liquid metaballs.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/buttons/gooey-fab.mdx" } }, { "id": "8883ae0a4d0034b4", "url": "https://godui.design/docs/components/navigation/dock", "title": "Dock (Part 1)", "content": "import { DockDemo } from \"@/components/demos/dock-demo\";\n\n\n {items.map(({ label, color, Icon }) => (\n \n \n \n ))}\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`Dock` tracks the pointer and magnifies each `DockItem` based on its distance from the\ncursor, using a spring (`mass 0.1`, `stiffness 170`, `damping 12`) so neighbors ripple\nsmoothly. Labels appear above the hovered item.\n\n## Usage\n\n```tsx\nimport { Dock, DockItem } from \"@/components/godui/dock\";\n```\n\n```tsx\n\n \n \n \n \n \n \n\n```\n\n### Tuning the magnification\n\n```tsx\n\n```\n\n## Props\n\n### Dock", "description": "A macOS-style dock whose items magnify with spring physics as the pointer moves across them.", "keywords": [ "label", "dock", "dockitem", "color", "icon", "from", "import", "components", "home", "search" ], "metadata": { "title": "Dock", "description": "A macOS-style dock whose items magnify with spring physics as the pointer moves across them.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/navigation/dock.mdx" } }, { "id": "896bcccf049b151f", "url": "https://godui.design/docs/components/navigation/magic-tab", "title": "Magic Tab (Part 1)", "content": "import { MagicTab } from \"@godui/components\";\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { MagicTab } from \"@/components/godui/magic-tab\";\n```\n\n```tsx\nconst items = [\n { value: \"overview\", label: \"Overview\" },\n { value: \"analytics\", label: \"Analytics\" },\n { value: \"reports\", label: \"Reports\" },\n];\n\n;\n```\n\nUse it controlled by passing `value` and `onValueChange`:\n\n```tsx\nconst [value, setValue] = useState(\"overview\");\n\n;\n```\n\n## Examples\n\n### Secondary\n\n;\n}`}\n>\n \n\n\n### Without rainbow\n\n Promise` | — | Async resolver (overrides `options`) |\n| `value` | `string` | — | Controlled selected value |\n| `defaultValue` | `string` | `\"\"` | Uncontrolled initial value |\n| `placeholder` | `string` | `\"Search…\"` | Input placeholder |\n| `emptyMessage` | `string` | `\"No results\"` | Shown when nothing matches |\n| `onChange` | `(value, option) => void` | — | Called on selection |", "description": "A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state.", "keywords": [ "value", "combobox", "description", "label", "options", "import", "from", "const", "components", "componentpreview" ], "metadata": { "title": "Combobox", "description": "A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/navigation/combobox.mdx" } }, { "id": "8a14c04f74ae8a68", "url": "https://godui.design/docs/components/layout/scroll-stack", "title": "Scroll Stack (Part 2)", "content": "By default the stack tracks the **page** scroll — the right choice for a full\nlanding-page section. Each card occupies one viewport of scroll distance.\n\n```tsx\n\n First\n Second\n Third\n\n```\n\n### Self-contained scroller\n\nPass `height` to make the stack its own scroll viewport — useful inside a bounded\nregion rather than the whole page.\n\n```tsx\n\n {/* cards */}\n\n```\n\n### Tuning the depth\n\n```tsx\n\n```\n\n## Accessibility\n\nWhen `prefers-reduced-motion` is set, `ScrollStack` renders the cards as a plain\nvertical list — no pinning, scaling, or blur.\n\n## Props\n\n| Prop | Type | Default | Description |\n| ----------- | --------- | --------- | --------------------------------------------------------------------------- |\n| `height` | `string` | — | When set, the stack becomes its own scroll viewport of this height. |\n| `baseScale` | `number` | `0.86` | Scale of the most-buried card at the back of the stack. |\n| `peek` | `number` | `16` | How far (px) each stacked card peeks below the one in front of it. |\n| `blur` | `boolean` | `true` | Blur buried cards as they recede. |\n| `pinTop` | `string` | `\"12vh\"` | Distance from the top of the scroller where cards pin. |\n\n`ScrollStack` also forwards every standard `
` attribute to the root element.", "description": "Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section.", "keywords": [ "scrollstack", "card", "from", "cards", "stack", "scroll", "title", "height", "classname", "blur" ], "metadata": { "title": "Scroll Stack", "description": "Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/scroll-stack.mdx" } }, { "id": "8a8ff0181f72e36a", "url": "https://godui.design/docs/components/layout/avatar-group", "title": "Avatar Group (Part 2)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `avatars` | `Avatar[]` | — | List of `{ src?, alt?, fallback?, href? }`. |\n| `max` | `number` | `4` | Max shown before the `+N` chip. |\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Avatar size. |\n| `spreadOnHover` | `boolean` | `true` | Fan the stack apart on hover. |", "description": "Overlapping avatars that fan apart on hover, with a +N overflow chip.", "keywords": [ "avatars", "avatargroup", "people", "size", "https", "pravatar", "import", "from", "godui", "components" ], "metadata": { "title": "Avatar Group", "description": "Overlapping avatars that fan apart on hover, with a +N overflow chip.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/avatar-group.mdx" } }, { "id": "8b1e21e66ba8408b", "url": "https://godui.design/docs/components/backgrounds/blueprint-grid", "title": "Blueprint Grid (Part 1)", "content": "import { BlueprintGrid } from \"@godui/components\";\n\nThe engineering-blueprint backdrop: a precise lattice with a diagonal light\nsweep traveling across it and a soft spotlight that follows the cursor. Choose\nruled `lines`, a `dots` matrix, or a floor-fading `perspective` grid. Pure CSS.\nDrop it as the first child of a `relative overflow-hidden` container.\n\n\n \n
\n

Built with precision

\n

Move your cursor across the grid.

\n
\n
\n );\n}`}\n>\n
\n \n
\n

Built with precision

\n

Move your cursor across the grid.

\n
\n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { BlueprintGrid } from \"@/components/godui/blueprint-grid\";\n\n
\n \n \n
\n```\n\nThe layer is `absolute inset-0 z-base`; parent must be `relative overflow-hidden`,\ncontent at `z-raised`+. Color defaults to `--color-border`. The sweep hides under\n`prefers-reduced-motion`; the static lattice remains.\n\n## Examples\n\n### Dots\n\n setItems((p) => p.filter((n) => n.id !== id))}\n onMarkAllRead={() => setItems((p) => p.map((n) => ({ ...n, read: true })))}\n />\n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nNotifications group by their `group` label with sticky headers and an unread\ncount badge. Drag a row left past the threshold to archive it; **Mark all read**\nclears the unread state. An empty list shows a gentle caught-up state.\n\n## Usage\n\n```tsx\nimport { NotificationInbox } from \"@/components/godui/notification-inbox\";\n```\n\n```tsx\n\n```\n\n## Props", "description": "A Linear-style notification center with time-bucketed groups, unread accent rails, swipe-to-archive, mark-all-read, and a polished empty state.", "keywords": [ "notificationinbox", "group", "import", "from", "items", "notifications", "notificationinboxdemo", "components", "setitems", "action" ], "metadata": { "title": "Notification Inbox", "description": "A Linear-style notification center with time-bucketed groups, unread accent rails, swipe-to-archive, mark-all-read, and a polished empty state.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/collaboration/notification-inbox.mdx" } }, { "id": "8c8a61cde1bace3a", "url": "https://godui.design/docs/components/layout/accordion", "title": "Accordion (Part 1)", "content": "import { Accordion } from \"@godui/components\";\n\nexport const faqItems = [\n {\n value: \"what\",\n title: \"What is GodUI?\",\n content:\n \"A collection of animated React components built with Tailwind CSS and Framer Motion.\",\n },\n {\n value: \"install\",\n title: \"How do I install a component?\",\n content: \"Use the shadcn CLI to add any component into your project.\",\n },\n {\n value: \"license\",\n title: \"Is it free to use?\",\n content: \"Yes — copy, paste, and ship.\",\n },\n];\n\n;\n}`}\n>\n
\n \n
\n\n\n## Multiple open\n\n`type=\"multiple\"` lets any number of panels stay open at once.\n\n;\n}`}\n>\n
\n \n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { Accordion } from \"@godui/components\";\n\n;\n```\n\n## Props", "description": "A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes.", "keywords": [ "accordion", "items", "value", "title", "content", "godui", "what", "type", "components", "multiple" ], "metadata": { "title": "Accordion", "description": "A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/accordion.mdx" } }, { "id": "8ceca6057610a737", "url": "https://godui.design/docs/components/overlays/dynamic-island", "title": "Dynamic Island (Part 1)", "content": "import { DynamicIsland } from \"@godui/components\";\nimport { DynamicIslandDemo } from \"@/components/demos/dynamic-island-demo\";\n\n\n \n {/* render content per size */}\n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nThe shell animates its `width`, `height`, and `borderRadius` between presets with\nan underdamped spring for the signature rubbery overshoot. Change `presenceKey`\n(or `size`) and the inner view cross-fades with a scale-and-blur transition. The\nspring is skipped under `prefers-reduced-motion`.\n\n## Usage\n\n```tsx\nimport { DynamicIsland } from \"@/components/godui/dynamic-island\";\n```\n\n```tsx\n\n \n\n```\n\nDrive `size` and `presenceKey` from state to morph between views. Size presets:\n`compact`, `default`, `long`, `tall`, and `large`.\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------------------------ | ----------- | ------------------------------------------------- |\n| `size` | `\"compact\" \\| \"default\" \\| \"long\" \\| \"tall\" \\| \"large\"` | `\"default\"` | Shape preset the island morphs to. |\n| `presenceKey` | `React.Key` | `size` | Identity of the current content; change to cross-fade. |", "description": "An Apple-inspired pill that springs between size presets while its content cross-fades.", "keywords": [ "size", "dynamicisland", "from", "import", "default", "presencekey", "components", "large", "godui", "dynamicislanddemo" ], "metadata": { "title": "Dynamic Island", "description": "An Apple-inspired pill that springs between size presets while its content cross-fades.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/overlays/dynamic-island.mdx" } }, { "id": "90e1c9e1cdbe8652", "url": "https://godui.design/docs/components/backgrounds/topographic-drift", "title": "Topographic Drift (Part 1)", "content": "import { TopographicDrift } from \"@godui/components\";\n\nContour lines of an imaginary landscape, slowly rising and falling as the terrain\nbeneath them evolves. Editorial, cartographic, and calm — drawn with marching\nsquares on one Canvas. Drop it as the first child of a `relative` container.\n\n\n \n
\n

Chart the unknown

\n

Terrain that never stops shifting.

\n
\n \n );\n}`}\n>\n
\n \n
\n

Chart the unknown

\n

Terrain that never stops shifting.

\n
\n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { TopographicDrift } from \"@/components/godui/topographic-drift\";\n\n
\n \n \n
\n```\n\nThe layer is `absolute inset-0 z-base`; parent must be `relative`, content at\n`z-raised`+. Color defaults to `--color-foreground` (tracks light/dark). Caps DPR\nat 2, pauses off-screen and on hidden tabs, and renders a static map under\n`prefers-reduced-motion`.\n\n## Examples\n\n### Dense\n\nMore levels, finer terrain.", "description": "Slowly drifting topographic contour lines — a living elevation map drawn with marching squares.", "keywords": [ "classname", "topographicdrift", "relative", "terrain", "overflow-hidden", "number", "import", "from", "godui", "components" ], "metadata": { "title": "Topographic Drift", "description": "Slowly drifting topographic contour lines — a living elevation map drawn with marching squares.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/backgrounds/topographic-drift.mdx" } }, { "id": "91594d50126db11d", "url": "https://godui.design/docs/components/layout/accordion", "title": "Accordion (Part 2)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `items` | `AccordionItem[]` | — | `{ value, title, content, disabled? }`. |\n| `type` | `\"single\" \\| \"multiple\"` | `\"single\"` | Open behavior. |\n| `defaultValue` | `string \\| string[]` | — | Initially open value(s). |\n| `collapsible` | `boolean` | `true` | Allow closing the open panel in single mode. |", "description": "A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes.", "keywords": [ "accordion", "items", "value", "title", "content", "godui", "what", "type", "components", "multiple" ], "metadata": { "title": "Accordion", "description": "A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/accordion.mdx" } }, { "id": "929ead5892434e80", "url": "https://godui.design/docs/components/index", "title": "Components (Part 5)", "content": "\n \n A disclosure list with spring height animation, rotating chevrons, and\n single or multiple open modes.\n \n \n A testimonial carousel with a shuffling image stack and crossfading quotes.\n \n \n Overlapping avatars that fan apart on hover, with a +N overflow chip.\n \n \n A modular bento layout of mixed-size cards that stagger in on scroll and\n lift with a spotlight on hover.\n \n \n A 3D stack of cards that cycles through a showcase loop, with pointer\n parallax and spring re-flow.\n \n \n Horizontal image panels that expand on hover to reveal their caption — an\n elegant, space-efficient gallery.\n \n \n A draggable before/after slider with clip-path reveal, keyboard support, and\n a pulsing handle hint.\n \n \n A vertical stack of cards where one expands to its full view while the rest\n collapse to compact pills.\n \n \n A drag-to-reorder list where items lift on grab, spring to place, and\n neighbours flow around them.\n \n \n Pinned cards that scale, recede, and stack as the page scrolls — the premium\n feature-reveal section.\n \n \n A step indicator with a spring-filled progress line and a number-to-checkmark\n morph.\n \n \n A physics, Tinder-style swipeable card deck with throw-to-dismiss,\n directional intent, and keyboard controls.\n \n \n A card that tilts in 3D toward the pointer with parallax depth and a\n specular glare.\n \n", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 4, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "942504961b4b67af", "url": "https://godui.design/docs/components/backgrounds/topographic-drift", "title": "Topographic Drift (Part 2)", "content": "\n \n \n );\n}`}\n>\n
\n \n
\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `lineCount` | `number` | `9` | Number of contour levels. |\n| `speed` | `number` | `1` | Drift speed multiplier. |\n| `color` | `string` | `--color-foreground` | Contour color. |\n| `noiseScale` | `number` | `0.004` | Field scale — smaller is broader terrain. |\n| `weight` | `number` | `1` | Contour line width (px). |\n\nAlso accepts standard `div` attributes (e.g. `className`, `style`).", "description": "Slowly drifting topographic contour lines — a living elevation map drawn with marching squares.", "keywords": [ "classname", "topographicdrift", "relative", "terrain", "overflow-hidden", "number", "import", "from", "godui", "components" ], "metadata": { "title": "Topographic Drift", "description": "Slowly drifting topographic contour lines — a living elevation map drawn with marching squares.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/backgrounds/topographic-drift.mdx" } }, { "id": "950b1e8eae87083b", "url": "https://godui.design/docs/components/buttons/magic-button", "title": "Magic Button (Part 2)", "content": "export function MagicButtonPlain() {\n return (\n
\n Push me\n Push me\n
\n );\n}`}\n>\n
\n Push me\n Push me\n
\n\n\n### Disabled\n\nPush me;\n}`}\n>\n Push me\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `variant` | `\"default\" \\| \"secondary\"` | `\"default\"` | Front face color scheme |\n| `size` | `\"sm\" \\| \"default\" \\| \"lg\"` | `\"default\"` | Button padding and text size |\n| `rainbow` | `boolean` | `true` | Animate the 3D edge and shadow with a rainbow gradient |", "description": "A pushable 3D button with rainbow edge animation and solid front face.", "keywords": [ "magicbutton", "push", "variant", "componentpreview", "default", "size", "rainbow", "import", "from", "godui" ], "metadata": { "title": "Magic Button", "description": "A pushable 3D button with rainbow edge animation and solid front face.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/buttons/magic-button.mdx" } }, { "id": "956f4d4b1b8957f3", "url": "https://godui.design/docs/components/backgrounds/geometric-background", "title": "Geometric Background", "content": "A full-bleed geometric layer. Drop it as the first child of a `relative overflow-hidden`\ncontainer and your content sits above it. Pick a look below — 99 patterns ported from\n[PatternCraft](https://patterncraft.fun). The component itself just takes `background`,\n`backgroundImage`, and `backgroundSize`; the picker fills them in.\n\n\n\n## Usage\n\n```tsx\nimport { GeometricBackground } from \"@/components/godui/geometric-background\";\n\n
\n \n \n
\n```\n\n## Props\n\nThe component bakes the selected variant's full style. It takes no custom props —\njust the standard `div` attributes.\n\n| Prop | Type | Description |\n| ---- | ---- | ----------- |\n| `style` | `CSSProperties` | Supply your own background. Setting any background key (`background`, `backgroundImage`, `backgroundColor`, …) replaces the baked default entirely. |\n| `className` | `string` | Extra classes on the layer (it is `absolute inset-0 z-base`). |\n\nAll other `div` attributes are forwarded.", "description": "Full-bleed geometric backgrounds — grids, dashed grids, diagonal crosses, and masked fades.", "keywords": [ "background", "component", "geometric", "layer", "relative", "overflow-hidden", "your", "from", "patterncraft", "just" ], "metadata": { "title": "Geometric Background", "description": "Full-bleed geometric backgrounds — grids, dashed grids, diagonal crosses, and masked fades.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/backgrounds/geometric-background.mdx" } }, { "id": "965559cada0c0411", "url": "https://godui.design/docs/components/inputs/magic-input", "title": "Magic Input (Part 3)", "content": "`status` and `progress` are fully controlled. While `status=\"loading\"` the\nrainbow hides, the 3D depth locks in, and a progress bar runs along the bottom —\ndeterminate when you pass `progress`, otherwise an indeterminate segment bounces\nend to end. The arrow turns into a circular progress / spinner. `success` and\n`error` flash a green / red sweep with a check / X icon.\n\n\n {}} status=\"loading\" />\n {}} status=\"loading\" progress={60} />\n {}} status=\"success\" />\n {}} status=\"error\" />\n \n );\n}`}\n>\n
\n \n \n \n \n
\n\n\nYou drive it from your submit handler:\n\n```tsx\nconst [status, setStatus] = useState(\"idle\");\nconst [progress, setProgress] = useState(0);\n\nasync function handleSubmit(value: string) {\n setStatus(\"loading\");\n try {\n await upload(value, setProgress); // call setProgress(0..100) as it runs\n setStatus(\"success\");\n } catch {\n setStatus(\"error\");\n }\n setTimeout(() => setStatus(\"idle\"), 1600);\n}\n\n;\n```\n\n## Installation\n\n\n\n## Usage", "description": "A 3D layered text input that lifts on focus with an optional rainbow edge animation.", "keywords": [ "magicinput", "placeholder", "rainbow", "status", "false", "componentpreview", "classname", "flex", "w-full", "max-w-xs" ], "metadata": { "title": "Magic Input", "description": "A 3D layered text input that lifts on focus with an optional rainbow edge animation.", "chunkIndex": 2, "totalChunks": 4, "sourcePath": "docs/components/inputs/magic-input.mdx" } }, { "id": "9887373bd948338f", "url": "https://godui.design/docs/components/visualizations/orbiting-circles", "title": "Orbiting Circles (Part 2)", "content": "\n \n 1\n 2\n \n \n 3\n 4\n 5\n \n`}\n>\n
\n \n 1\n 2\n \n \n 3\n 4\n 5\n \n
\n\n\n## Props", "description": "Icons that orbit a center point on a configurable ring, staying upright as they travel.", "keywords": [ "chip", "orbitingcircles", "classname", "span", "radius", "duration", "flex", "items-center", "justify-center", "text-sm" ], "metadata": { "title": "Orbiting Circles", "description": "Icons that orbit a center point on a configurable ring, staying upright as they travel.", "chunkIndex": 1, "totalChunks": 3, "sourcePath": "docs/components/visualizations/orbiting-circles.mdx" } }, { "id": "9ace2a9f4c240b0b", "url": "https://godui.design/docs/components/layout/card-swap", "title": "Card Swap (Part 1)", "content": "import { CardSwap } from \"@godui/components\";\nimport { CardSwapDemo } from \"@/components/demos/card-swap-demo\";\n\nA 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.\n\n\n {features.map((f) => (\n
\n

{f.title}

\n

{f.body}

\n
\n ))}\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nEach card is assigned a rank in the stack; when the order rotates, every card\nsprings to its new slot — scale, offset, and z-index all interpolate at once.\nThe container reads the pointer position and tilts the whole stack in 3D for\nparallax depth.\n\n## Usage\n\n```tsx\nimport { CardSwap } from \"@/components/godui/card-swap\";\n```\n\n```tsx\n\n One\n Two\n Three\n\n```\n\nGive the `CardSwap` a fixed size (`h-… w-…`); each card fills it.\n\n### Manual only\n\nSet `interval={0}` to disable auto-advance and drive the stack with the arrows\n(or your own controls).", "description": "A 3D stack of cards that cycles through a showcase loop, with pointer parallax and spring re-flow.", "keywords": [ "cardswap", "card", "stack", "from", "title", "every", "classname", "import", "components", "cards" ], "metadata": { "title": "Card Swap", "description": "A 3D stack of cards that cycles through a showcase loop, with pointer parallax and spring re-flow.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/card-swap.mdx" } }, { "id": "9bbfb138eac27406", "url": "https://godui.design/docs/mcp", "title": "MCP Server", "content": "GodUI ships an [MCP](https://modelcontextprotocol.io) server so AI coding agents\n(Cursor, Windsurf, Claude, Cline, Roo-Cline, …) can browse the GodUI catalog and\ninstall components straight into your project. Add it once, then just ask for the\ncomponent you want in plain language.\n\n## Installation\n\nUse the **CLI** to write the config automatically, or add it **Manually**.\n\n\n\nThe server runs locally over `stdio` via `npx` — no API key, no account. The CLI\ninstalls into your editor's MCP config; with Manual you paste the block into it\nyourself.\n\n## Usage\n\nAsk your IDE to use any GodUI component:\n\n- \"Add a GodUI magic button\"\n- \"Add a marquee of logos\"\n- \"Add an animated gradient background\"\n- \"Add a number ticker that counts to 1000\"\n\nThe agent finds the right component, then installs it with the\n[shadcn CLI](/docs/installation) — copying the source into your project so you\nown it.\n\n## Tools\n\nThe server exposes three tools:\n\n| Tool | What it does |\n| --- | --- |\n| `list_components` | List the full catalog, optionally filtered by category. |\n| `search_components` | Find components by what they do (natural language). |\n| `get_component` | Fetch one component's install command and full source. |\n\n## How it works\n\nThe server fetches the live registry at `https://godui.design/r`, so it always\nserves the latest components — no upgrade needed when GodUI ships something new.\nPoint it at a local registry for development by setting `GODUI_REGISTRY_URL`:\n\n```bash\nGODUI_REGISTRY_URL=http://localhost:3000/r npx @godui/mcp@latest\n```", "description": "Use GodUI from your AI IDE — discover and install components by description.", "keywords": [ "godui", "components", "server", "into", "your", "component", "registry", "ships", "https", "catalog" ], "metadata": { "title": "MCP Server", "description": "Use GodUI from your AI IDE — discover and install components by description.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/mcp.mdx" } }, { "id": "9c60274299f71164", "url": "https://godui.design/docs/components/navigation/dropdown-menu", "title": "Dropdown Menu (Part 1)", "content": "import { DropdownMenuDemo } from \"@/components/demos/dropdown-menu-demo\";\n\n, shortcut: \"⌘P\", onSelect: () => setLast(\"Profile\") },\n { label: \"Billing\", icon: , onSelect: () => setLast(\"Billing\") },\n {\n label: \"Switch workspace\",\n icon: ,\n submenu: [\n { label: \"Northwind\", onSelect: () => setLast(\"Northwind\") },\n { label: \"Acme Inc.\", onSelect: () => setLast(\"Acme Inc.\") },\n { type: \"separator\" },\n { label: \"New workspace\", icon: , onSelect: () => setLast(\"New\") },\n ],\n },\n { type: \"separator\" },\n { label: \"Log out\", icon: , onSelect: () => setLast(\"Log out\") },\n ];\n\n return Ada Lovelace} items={items} />;\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { DropdownMenu } from \"@/components/godui/dropdown-menu\";\n```\n\n```tsx\nconst items = [\n { label: \"Profile\", onSelect: () => {} },\n { label: \"Workspaces\", submenu: [{ label: \"GodUI\", onSelect: () => {} }] },\n { type: \"separator\" },\n { label: \"Log out\", onSelect: () => {} },\n];\n\nOpen} items={items} side=\"bottom\" align=\"start\" />;\n```\n\nItems can be `{ type: \"separator\" }`, `{ type: \"label\", label }`, or an action with\n`label`, optional `icon`, `shortcut`, `href`, `disabled`, `onSelect`, or a nested `submenu`.", "description": "An accessible dropdown that springs open from its trigger edge, with submenus, icons, shortcuts, separators, and full keyboard navigation.", "keywords": [ "label", "onselect", "items", "setlast", "type", "icon", "import", "from", "classname", "size-4" ], "metadata": { "title": "Dropdown Menu", "description": "An accessible dropdown that springs open from its trigger edge, with submenus, icons, shortcuts, separators, and full keyboard navigation.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/navigation/dropdown-menu.mdx" } }, { "id": "9ddecc381811929a", "url": "https://godui.design/docs/components/overlays/command-palette", "title": "Command Palette (Part 1)", "content": "import { CommandPaletteDemo } from \"@/components/demos/command-palette-demo\";\n\n\n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`CommandPalette` is a controlled, portalled ⌘K menu. It filters as you type, moves the\nactive highlight with a spring (`layoutId`), and supports `↑` `↓` to navigate, `Enter`\nto select, and `Escape` to close. With `enableShortcut` it toggles on ⌘K / Ctrl+K.\n\n## Usage\n\n```tsx\n\"use client\";\nimport { CommandPalette } from \"@/components/godui/command-palette\";\nimport { useState } from \"react\";\n\nconst groups = [\n {\n heading: \"Navigation\",\n items: [\n { id: \"home\", label: \"Go to Home\", shortcut: \"G H\", onSelect: () => navigate(\"/\") },\n { id: \"docs\", label: \"Search Docs\", keywords: [\"help\"] },\n ],\n },\n];\n\nexport function Example() {\n const [open, setOpen] = useState(false);\n return ;\n}\n```\n\n## Props", "description": "A ⌘K command menu with fuzzy filtering, keyboard navigation, and spring enter / exit.", "keywords": [ "open", "groups", "label", "commandpalette", "import", "from", "shortcut", "icon", "setopen", "usestate" ], "metadata": { "title": "Command Palette", "description": "A ⌘K command menu with fuzzy filtering, keyboard navigation, and spring enter / exit.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/overlays/command-palette.mdx" } }, { "id": "9f04763d98393e03", "url": "https://godui.design/docs/components/index", "title": "Components (Part 11)", "content": "\n \n A technical lattice — lines, dots, or a perspective floor — with a light\n sweep and cursor spotlight.\n \n \n Full-bleed decorative backgrounds — radial and corner gradient washes —\n selectable by variant.\n \n \n Full-bleed effect backgrounds — radial glows, aurora dreams, and soft pastel\n washes — selectable by variant.\n \n \n Particles streaming along an evolving noise vector field, leaving silky\n fading trails.\n \n \n Full-bleed geometric backgrounds — grids, dashed grids, diagonal crosses,\n and masked fades — selectable by variant.\n \n \n Full-bleed gradient backgrounds — radial glows, aurora washes, and depth\n fades — selectable by variant.\n \n \n Volumetric god-rays that slowly sweep and breathe, with optional film grain.\n Pure CSS.\n \n \n Gooey blobs that drift, collide, and merge under an SVG goo filter — with a\n cursor blob.\n \n \n A grid of flickering squares with a cursor spotlight that lights up nearby\n pixels.\n \n \n Slowly drifting topographic contour lines — a living elevation map drawn with\n marching squares.\n \n \n A depth starfield you fly through — cursor parallax and an optional\n hyperspace warp.\n \n", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 10, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "9f7fdfa8289162c6", "url": "https://godui.design/docs/components/visualizations/animated-beam", "title": "Animated Beam (Part 3)", "content": "| Prop | Type | Default | Description |\n| -------------------- | --------------------- | ----------- | -------------------------------------------- |\n| `containerRef` | `RefObject` | — | Element the SVG overlays. |\n| `fromRef` | `RefObject` | — | Element the beam starts from. |\n| `toRef` | `RefObject` | — | Element the beam ends at. |\n| `curvature` | `number` | `0` | Bow of the curve in pixels. |\n| `reverse` | `boolean` | `false` | Animate from end toward start. |\n| `duration` | `number` | `3` | Seconds for one travel of the gradient. |\n| `delay` | `number` | `0` | Delay before the first travel, in seconds. |\n| `pathColor` | `string` | `var(--border)` | Color of the static resting path. |\n| `pathWidth` | `number` | `2` | Width of the path in pixels. |\n| `pathOpacity` | `number` | `0.2` | Opacity of the static resting path. |\n| `pathDashArray` | `string` | — | `stroke-dasharray` for the resting path (`\"4 5\"` dashes, `\"0.1 8\"` dots). |\n| `gradientStartColor` | `string` | `var(--primary)` | Leading color of the travelling gradient.|\n| `gradientStopColor` | `string` | — | Trailing color of the travelling gradient. |", "description": "An animated gradient beam that travels along a path connecting two separate nodes.", "keywords": [ "fromref", "toref", "containerref", "animatedbeam", "from", "useref", "const", "delay", "beam", "import" ], "metadata": { "title": "Animated Beam", "description": "An animated gradient beam that travels along a path connecting two separate nodes.", "chunkIndex": 2, "totalChunks": 3, "sourcePath": "docs/components/visualizations/animated-beam.mdx" } }, { "id": "a16ff326ca04aa9c", "url": "https://godui.design/docs/components/buttons/gooey-fab", "title": "Gooey FAB (Part 1)", "content": "import { GooeyFab } from \"@godui/components\";\n\nThe Gooey FAB extrudes a set of satellite actions from a single trigger, fused by an SVG metaball filter so they split apart like mercury. The trigger icon rotates from a plus into a cross as it opens.\n\n (\n \n \n \n);\n\nexport function GooeyFabDemo() {\n return (\n },\n { label: \"Share\", icon: },\n { label: \"Delete\", icon: },\n ]}\n />\n );\n}`}\n>\n },\n { label: \"Share\", icon: },\n { label: \"Delete\", icon: },\n ]}\n />\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { GooeyFab } from \"@/components/godui/gooey-fab\";\n```", "description": "A floating action button that gooey-morphs to extrude its satellite actions like liquid metaballs.", "keywords": [ "icon", "label", "round", "actions", "gooeyfab", "size", "open", "from", "trigger", "classname" ], "metadata": { "title": "Gooey FAB", "description": "A floating action button that gooey-morphs to extrude its satellite actions like liquid metaballs.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/buttons/gooey-fab.mdx" } }, { "id": "a37918067c7cf120", "url": "https://godui.design/docs/components/buttons/mask-button", "title": "Mask Button (Part 1)", "content": "import { MaskButton } from \"@godui/components\";\n\n\n Hover me\n Hover me\n Hover me\n \n );\n}`}\n>\n
\n Hover me\n Hover me\n Hover me\n
\n\n\nThe primary face is masked by a horizontal sprite-sheet image. On hover the\nmask flipbooks frame-by-frame (`steps()` on `mask-position`), wiping the face\naway to reveal the label, then plays in reverse on mouse-leave. Each `mask`\nvalue uses a different sprite for a distinct transition. Inspired by\n[this Codrops article](https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/).\n\n## Installation\n\nThe hover transition is driven by three sprite-sheet mask images. The CLI copies\nthe component and CSS, but the masks ship as static assets — download them into\nyour app's `public/masks/` folder (the Manual tab links them directly).\n\n\n\n## Usage\n\n```tsx\nimport { MaskButton } from \"@godui/components\";\n```\n\n```tsx\nHover me\n```\n\n## Examples\n\n### Secondary\n\n` attribute to the root element.", "description": "An Apple-inspired pill that springs between size presets while its content cross-fades.", "keywords": [ "size", "dynamicisland", "from", "import", "default", "presencekey", "components", "large", "godui", "dynamicislanddemo" ], "metadata": { "title": "Dynamic Island", "description": "An Apple-inspired pill that springs between size presets while its content cross-fades.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/overlays/dynamic-island.mdx" } }, { "id": "a7b1059716b7d916", "url": "https://godui.design/docs/components/inputs/otp-input", "title": "OTP Input (Part 2)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `length` | `number` | `6` | Number of code cells. |\n| `value` | `string` | — | Controlled value. |\n| `defaultValue` | `string` | `\"\"` | Uncontrolled initial value. |\n| `type` | `\"numeric\" \\| \"alphanumeric\"` | `\"numeric\"` | Accepted characters. |\n| `mask` | `boolean` | `false` | Render characters as dots. |\n| `status` | `\"idle\" \\| \"error\" \\| \"success\"` | `\"idle\"` | Validation state. |\n| `disabled` | `boolean` | `false` | Disable input. |\n| `autoFocus` | `boolean` | `false` | Focus on mount. |\n| `onChange` | `(value: string) => void` | — | Fires on every change. |\n| `onComplete` | `(value: string) => void` | — | Fires when the last cell fills. |", "description": "A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake.", "keywords": [ "otpinput", "length", "code", "status", "componentpreview", "import", "from", "godui", "components", "defaultvalue" ], "metadata": { "title": "OTP Input", "description": "A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/inputs/otp-input.mdx" } }, { "id": "a839cc6167116814", "url": "https://godui.design/docs/components/text/elastic-text", "title": "Elastic Text (Part 2)", "content": "`loop={false}` runs a single spotlight sweep across the text, then settles back to normal weight. Use the replay button to run it again.\n\n\n Plays once\n \n );\n}`}\n>\n \n Plays once\n \n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `children` | `ReactNode` | — | Text content to animate |\n| `mode` | `\"auto\" \\| \"hover\"` | `\"auto\"` | `auto` self-sweeps a spotlight; `hover` follows the pointer |\n| `minWeight` | `number` | `300` | Resting (lightest) font weight |\n| `maxWeight` | `number` | `900` | Peak (heaviest) weight under the spotlight / pointer |\n| `duration` | `number` | `2` | Seconds for one full `auto` sweep |\n| `loop` | `boolean` | `true` | Repeat the `auto` sweep |\n| `startOnView` | `boolean` | `true` | Start the `auto` sweep only once the text scrolls into view |\n| `radius` | `number` | `120` | Pointer influence radius in px (`hover` mode) |\n\n## Accessibility\n\nWhen `prefers-reduced-motion` is enabled, the animation is disabled and the text renders statically at `minWeight`.", "description": "Variable-font text whose weight springs up under an automatic spotlight or the pointer.", "keywords": [ "elastictext", "classname", "text-4xl", "hover", "weight", "auto", "componentpreview", "font", "spotlight", "text" ], "metadata": { "title": "Elastic Text", "description": "Variable-font text whose weight springs up under an automatic spotlight or the pointer.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/text/elastic-text.mdx" } }, { "id": "a85bf2f4235a2774", "url": "https://godui.design/docs/components/overlays/toast", "title": "Toast", "content": "import { ToastDemo } from \"@/components/demos/toast-demo\";\n\n\n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nRender a single `` near the root of your app, then call `toast()`\nfrom anywhere. Toasts spring in, auto-dismiss, pause on hover, and can be swiped away.\n\n## Usage\n\n```tsx\n// app/layout.tsx\nimport { ToastProvider } from \"@/components/godui/toast\";\n\nexport default function RootLayout({ children }) {\n return (\n \n {children}\n \n \n );\n}\n```\n\n```tsx\n\"use client\";\nimport { toast } from \"@/components/godui/toast\";\n\ntoast({ title: \"Event created\", description: \"Friday at 5pm\" });\ntoast.success({ title: \"Saved\" });\ntoast.error({ title: \"Something went wrong\" });\n```\n\n### With an action\n\n```tsx\ntoast({\n title: \"Deleted file\",\n description: \"report.pdf\",\n action: { label: \"Undo\", onClick: restore },\n});\n```\n\n## API\n\n### `ToastProvider`\n\n| Prop | Type | Default | Description |\n| ---------- | --------------- | ---------------- | --------------------------------- |\n| `position` | `ToastPosition` | `\"bottom-right\"` | Corner the stack is anchored to. |\n| `duration` | `number` | `4000` | Default auto-dismiss delay in ms. |\n\n### `toast(options)`\n\nReturns the toast `id`. `toast.success` and `toast.error` set the variant;\n`toast.dismiss(id)` removes one early. `options` is\n`{ title?, description?, variant?, duration?, action? }`.", "description": "Stacked, swipe-dismissible toasts with an imperative toast() API.", "keywords": [ "toast", "toastprovider", "title", "from", "description", "import", "components", "toastdemo", "godui", "default" ], "metadata": { "title": "Toast", "description": "Stacked, swipe-dismissible toasts with an imperative toast() API.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/overlays/toast.mdx" } }, { "id": "adcbc3a0f7d6f0ed", "url": "https://godui.design/docs/components/collaboration/live-cursors", "title": "Live Cursors", "content": "import { LiveCursorsDemo } from \"@/components/demos/live-cursors-demo\";\n\n;\n}\n\n// Or self-driving peers for demos and marketing:\nexport function LiveCursorsDemo() {\n return ;\n}`}\n>\n \n\n\n## Installation\n\n\n\n`LiveCursors` renders an absolutely-positioned overlay inside a `relative`\ncontainer. Each cursor is spring-lerped, so positions stay smooth even with\ncoarse network updates. Colors come from the shared presence palette. Use\n`SimulatedCursors` for self-driving peers in docs, stories, or hero sections.\n\n## Usage\n\n```tsx\nimport { LiveCursors } from \"@/components/godui/live-cursors\";\n```\n\n```tsx\n
\n \n
\n```\n\n## Props\n\n### LiveCursors\n\n| Prop | Type | Default | Description |\n| ----------- | -------------- | ------- | -------------------------------------------- |\n| `cursors` | `LiveCursor[]` | — | Cursors with `x`/`y` relative to container. |\n| `hideNames` | `boolean` | `false` | Show pointers only, no name flags. |\n\n### SimulatedCursors\n\n| Prop | Type | Default | Description |\n| ------- | ---------- | ------------------------ | ---------------------------- |\n| `names` | `string[]` | four sample teammates | Names for the drifting peers.|", "description": "Smoothly interpolated multiplayer cursors with trailing name flags and optional cursor-chat — the signature \"this app is alive\" effect.", "keywords": [ "livecursors", "from", "peers", "simulatedcursors", "cursors", "import", "livecursorsdemo", "components", "names", "relative" ], "metadata": { "title": "Live Cursors", "description": "Smoothly interpolated multiplayer cursors with trailing name flags and optional cursor-chat — the signature \"this app is alive\" effect.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/collaboration/live-cursors.mdx" } }, { "id": "b01793ad6e0d22c0", "url": "https://godui.design/docs/index", "title": "Introduction", "content": "import { Cards, Card } from \"fumadocs-ui/components/card\";\nimport { MagicButton } from \"@godui/components\";\n\n**GodUI** is a collection of open-source, animated UI components for Design\nEngineers. Built with **React**, **TypeScript**, **Tailwind CSS v4**, and\n**Motion**, and distributed as a [shadcn](https://ui.shadcn.com) registry — so\nthe components are copied straight into your project and you own every line.\n\nGet Started;\n}`}>\n Get Started\n\n\n## What you get\n\n- **You own the code.** Components are installed into your codebase via the\n shadcn CLI — not hidden behind a versioned dependency.\n- **Motion-first.** Every component ships with polished, performant animation\n out of the box.\n- **shadcn-native.** Same install flow as shadcn/ui. If you already use shadcn,\n just add the `@godui` registry.\n- **Tailwind v4 tokens.** Themed with CSS variables — light and dark modes work\n with zero extra config.\n- **Type-safe.** Full TypeScript types for every component and its props.\n\n## Next steps\n\n\n \n Add the `@godui` registry and pull your first component in minutes.\n \n \n Browse the full collection of animated components.\n \n", "description": "An open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui.", "keywords": [ "components", "card", "magicbutton", "godui", "shadcn", "with", "import", "cards", "from", "registry" ], "metadata": { "title": "Introduction", "description": "An open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/index.mdx" } }, { "id": "b2563175b7281a43", "url": "https://godui.design/docs/components/ai/voice-orb", "title": "Voice Orb (Part 2)", "content": "| Prop | Type | Default | Description |\n| ----------- | --------------------------------------- | -------- | ----------------------------------------------------- |\n| `state` | `\"idle\" \\| \"listening\" \\| \"speaking\"` | `\"idle\"` | Conversation phase the orb visualizes. |\n| `amplitude` | `number` | `0` | Live audio level `0`–`1`; drives the swell and corona. |\n| `size` | `number` | `160` | Diameter in pixels. |\n\n`VoiceOrb` also forwards every standard `
` attribute to the root element.", "description": "A Siri-style audio-reactive orb that breathes when idle, pulses while listening, and swells with the voice as it speaks.", "keywords": [ "amplitude", "voiceorb", "from", "stream", "import", "useaudioamplitude", "components", "const", "state", "listening" ], "metadata": { "title": "Voice Orb", "description": "A Siri-style audio-reactive orb that breathes when idle, pulses while listening, and swells with the voice as it speaks.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/ai/voice-orb.mdx" } }, { "id": "b2e93821f744bc30", "url": "https://godui.design/docs/components/effects/fluid-cursor", "title": "Fluid Cursor (Part 2)", "content": "| Prop | Type | Default | Description |\n| --------------------- | --------------------------------- | ------------------ | ------------------------------------------------------ |\n| `size` | `number` | `18` | Diameter of the leading dot in pixels. |\n| `color` | `string` | `\"white\"` | Dot color; `white` inverts cleanly under `blend`. |\n| `blend` | `boolean` | `true` | Invert the backdrop with `mix-blend-mode: difference`. |\n| `trail` | `boolean` | `true` | Render the soft lagging smear. |\n| `containerRef` | `RefObject` | — | Scope the cursor to a positioned element. |\n| `interactiveSelector` | `string` | links, buttons, `[data-cursor]` | Elements that enlarge the cursor on hover. |", "description": "A spring-lagged blend-mode cursor that trails the pointer and swells over interactive elements.", "keywords": [ "fluidcursor", "cursor", "import", "from", "components", "containerref", "godui", "fluidcursordemo", "useref", "null" ], "metadata": { "title": "Fluid Cursor", "description": "A spring-lagged blend-mode cursor that trails the pointer and swells over interactive elements.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/effects/fluid-cursor.mdx" } }, { "id": "b7bb717b613f972f", "url": "https://godui.design/docs/components/text/aurora-text", "title": "Aurora Text (Part 2)", "content": "`AuroraText` also forwards every standard `` attribute (`className`,\n`style`, `id`, …) to the root element.", "description": "Gradient text with a rainbow aurora that drifts across the letters.", "keywords": [ "auroratext", "colors", "speed", "classname", "import", "from", "godui", "components", "text-6xl", "font-bold" ], "metadata": { "title": "Aurora Text", "description": "Gradient text with a rainbow aurora that drifts across the letters.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/text/aurora-text.mdx" } }, { "id": "b80664a2613c4cab", "url": "https://godui.design/docs/components/effects/spotlight-card", "title": "Spotlight Card (Part 1)", "content": "import { SpotlightCard } from \"@godui/components\";\nimport { SpotlightCardDemo } from \"@/components/demos/spotlight-card-demo\";\n\n\n

Pro

\n
\n $24\n /mo\n
\n
    \n {features.map((f) => (\n
  • \n \n {f}\n
    • \n ))}\n
\n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`SpotlightCard` writes the pointer position to CSS variables on each move — no React\nre-render — and reveals a radial gradient that fades in on hover. The border highlight\nis the same gradient masked to the 1px ring.\n\n## Usage\n\n```tsx\nimport { SpotlightCard } from \"@/components/godui/spotlight-card\";\n```\n\n```tsx\n\n

Title

\n

Body copy

\n\n```\n\n### Custom glow\n\n`glowColor` accepts any CSS color; `radius` controls the spotlight size in pixels.\n\n```tsx\n\n```\n\n### Without a border glow", "description": "A card with a radial spotlight glow that follows the pointer, optionally lighting the border.", "keywords": [ "classname", "spotlightcard", "border", "text-sm", "font-semibold", "text-foreground", "glowcolor", "oklch", "componentpreview", "glow" ], "metadata": { "title": "Spotlight Card", "description": "A card with a radial spotlight glow that follows the pointer, optionally lighting the border.", "chunkIndex": 0, "totalChunks": 3, "sourcePath": "docs/components/effects/spotlight-card.mdx" } }, { "id": "baa54de21a3f5867", "url": "https://godui.design/docs/components/ai/voice-orb", "title": "Voice Orb (Part 1)", "content": "import { VoiceOrb } from \"@godui/components\";\nimport { VoiceOrbDemo } from \"@/components/demos/voice-orb-demo\";\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\nA rotating rainbow corona blooms behind a glassy core. The core breathes on its\nown when `idle`; feed a live `amplitude` (`0`–`1`) and it swells with the voice\nwhile `speaking`, or pulses a ring while `listening`. All motion is paused under\n`prefers-reduced-motion`.\n\n## Usage\n\n```tsx\nimport { VoiceOrb, useAudioAmplitude } from \"@/components/godui/voice-orb\";\n```\n\nThe bundled `useAudioAmplitude` hook turns a `MediaStream` into a smoothed\n`0`–`1` level you can hand straight to the orb. It returns `0` on the server or\nwhen no stream is attached, so it's safe to call unconditionally.\n\n```tsx\nconst stream = await navigator.mediaDevices.getUserMedia({ audio: true });\nconst amplitude = useAudioAmplitude(stream);\n\nreturn ;\n```\n\nDriving it from an agent instead of a mic? Set `state=\"speaking\"` and feed the\noutput level from your TTS / realtime stream.\n\n## Props", "description": "A Siri-style audio-reactive orb that breathes when idle, pulses while listening, and swells with the voice as it speaks.", "keywords": [ "amplitude", "voiceorb", "from", "stream", "import", "useaudioamplitude", "components", "const", "state", "listening" ], "metadata": { "title": "Voice Orb", "description": "A Siri-style audio-reactive orb that breathes when idle, pulses while listening, and swells with the voice as it speaks.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/ai/voice-orb.mdx" } }, { "id": "bb8b3e629358ae9c", "url": "https://godui.design/docs/installation", "title": "Installation (Part 2)", "content": "The theme supports light and dark via the `.dark` class on a parent element\n(typically ``). Toggle it with your framework's theme switcher.\n\n```html\n\n \n\n```\n\nBrowse the [Magic Button](/docs/components/buttons/magic-button) docs for a live\npreview.", "description": "Install GodUI components with the shadcn CLI.", "keywords": [ "godui", "shadcn", "font", "html", "components", "your", "theme", "geist", "dark", "with" ], "metadata": { "title": "Installation", "description": "Install GodUI components with the shadcn CLI.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/installation.mdx" } }, { "id": "bd6160588c3afa8e", "url": "https://godui.design/docs/components/layout/tilt-card", "title": "Tilt Card (Part 1)", "content": "import { TiltCard } from \"@godui/components\";\nimport { TiltCardDemo } from \"@/components/demos/tilt-card-demo\";\n\n\n

Designed in 3D

\n

Move your pointer across the card — it tilts toward you with parallax depth and a glare that tracks the cursor.

\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nThe pointer position is normalized over the card and spring-mapped to `rotateX`\nand `rotateY` on a `perspective` container. The content layer floats toward the\nviewer by `depth` for parallax, and a radial glare follows the cursor. It eases\nback to flat on leave, and renders as a plain static card under\n`prefers-reduced-motion`.\n\n## Usage\n\n```tsx\nimport { TiltCard } from \"@/components/godui/tilt-card\";\n```\n\n```tsx\n\n

Title

\n

Body copy

\n\n```\n\n### Stronger tilt and depth\n\n\n

Deeper parallax

\n

Crank maxTilt and depth for a more dramatic effect.

\n`}\n>\n \n

Deeper parallax

\n

Crank maxTilt and depth for a more dramatic effect.

\n \n\n\n## Props", "description": "A card that tilts in 3D toward the pointer with parallax depth and a specular glare.", "keywords": [ "tiltcard", "classname", "depth", "maxtilt", "import", "from", "components", "componentpreview", "w-72", "pointer" ], "metadata": { "title": "Tilt Card", "description": "A card that tilts in 3D toward the pointer with parallax depth and a specular glare.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/tilt-card.mdx" } }, { "id": "bd7ce3dcb1ae6365", "url": "https://godui.design/docs/components/text/highlighter", "title": "Highlighter (Part 3)", "content": "export function HighlighterSentence() {\n return (\n

\n The quick brown fox{\" \"}\n jumps over the lazy dog.\n

\n );\n}`}\n>\n

The quick brown fox jumps over the lazy dog.

\n\n\n### Tuning the sketch\n\nPush `strokeWidth`, `iterations`, `padding`, and `animationDuration` for a bolder, looser, slower draw.\n\n\n \n Bolder, looser, slower\n \n

\n );\n}`}\n>\n

\n Bolder, looser, slower\n

\n\n\n## Props", "description": "Draw hand-drawn sketch annotations over inline text — highlight, underline, box, circle, and more. Powered by Rough Notation.", "keywords": [ "highlighter", "action", "color", "highlight", "underline", "text", "circle", "strike-through", "crossed-off", "bracket" ], "metadata": { "title": "Highlighter", "description": "Draw hand-drawn sketch annotations over inline text — highlight, underline, box, circle, and more. Powered by Rough Notation.", "chunkIndex": 2, "totalChunks": 4, "sourcePath": "docs/components/text/highlighter.mdx" } }, { "id": "bd9b5f96f527ac9b", "url": "https://godui.design/docs/components/backgrounds/warp-starfield", "title": "Warp Starfield (Part 1)", "content": "import { WarpStarfield } from \"@godui/components\";\n\nStars stream toward you out of the dark, with the cursor gently steering the\nfield for parallax. Flip on `warp` for a hyperspace jump where the stars stretch\ninto streaks. Drop it as the first child of a `relative` container.\n\n\n \n
\n

Reach the stars

\n

Move your cursor to steer.

\n
\n
\n );\n}`}\n>\n
\n \n
\n

Reach the stars

\n

Move your cursor to steer.

\n
\n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { WarpStarfield } from \"@/components/godui/warp-starfield\";\n\n
\n \n \n
\n```\n\nThe layer is `absolute inset-0 z-base`; parent must be `relative`, content at\n`z-raised`+. Star color defaults to `--color-foreground` (tracks light/dark — it\nreads on light surfaces too). Caps DPR at 2, pauses off-screen and on hidden\ntabs, and renders a static frame under `prefers-reduced-motion`.\n\n## Examples\n\n### Hyperspace\n\n\n \n \n \n \n );\n}`}\n>\n
\n \n \n \n
\n\n\n## Variants\n\nThe `variant` tints the 3D edge. It shows when `rainbow={false}` (the rainbow\ngradient otherwise overrides the edge while focused).\n\n\n \n \n \n );\n}`}\n>\n
\n \n \n
\n\n\n## Depth\n\n`depth=\"focus\"` (default) stays flat until focused. `depth=\"always\"` keeps the\nraised 3D look at rest.\n\n\n Animate your ideas into reality\n \n );\n}`}\n>\n \n Animate your ideas into reality\n \n\n\n## Installation\n\n\n\n`TextAnimate` requires `framer-motion` as a peer dependency:\n\n```bash\nnpm install framer-motion\n```\n\n## Usage\n\n```tsx\nimport { TextAnimate } from \"@/components/godui/text-animate\";\n```\n\n### Word fade in\n\n```tsx\n\n Animate your ideas into reality\n\n```\n\n### Character stagger\n\n```tsx\n\n Character by character\n\n```\n\n### Scroll into view\n\n```tsx\n\n Scroll to reveal\n\n```\n\n### Semantic heading\n\n```tsx\n\n Hero headline\n\n```\n\n## Examples\n\nHit the replay button on any preview to play the animation again.\n\n### Word fade in\n\n\n \n \n \n );\n}`}\n>\n
\n \n \n
\n\n\n## Sizes\n\n\n \n \n \n \n );\n}`}\n>\n
\n \n \n \n
\n\n\n## Submit button\n\nPass `onSubmit` to render an arrow button on the right. It fires with the\ncurrent value on click or when Enter is pressed. Without `onSubmit`,\nset `submitButton` to render a `type=\"submit\"` button for an enclosing form.\n\n\n alert(v)} />\n alert(v)} />\n \n );\n}`}\n>\n
\n \n \n
\n\n\n## Submit lifecycle", "description": "A 3D layered text input that lifts on focus with an optional rainbow edge animation.", "keywords": [ "magicinput", "placeholder", "rainbow", "status", "false", "componentpreview", "classname", "flex", "w-full", "max-w-xs" ], "metadata": { "title": "Magic Input", "description": "A 3D layered text input that lifts on focus with an optional rainbow edge animation.", "chunkIndex": 1, "totalChunks": 4, "sourcePath": "docs/components/inputs/magic-input.mdx" } }, { "id": "c1d2fad6a9bd9fd1", "url": "https://godui.design/docs/components/navigation/breadcrumbs", "title": "Breadcrumbs (Part 1)", "content": "import { BreadcrumbsDemo, BreadcrumbsCollapsedDemo } from \"@/components/demos/breadcrumbs-demo\";\n\n },\n { label: \"Workspace\", href: \"#\", icon: },\n { label: \"Settings\", href: \"#\", icon: },\n { label: \"Billing\", icon: },\n];\n\nexport function BreadcrumbsDemo() {\n return ;\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { Breadcrumbs } from \"@/components/godui/breadcrumbs\";\n```\n\n```tsx\nconst items = [\n { label: \"Home\", href: \"/\" },\n { label: \"Library\", href: \"/library\" },\n { label: \"Current\" },\n];\n\n;\n```\n\nHovering crumbs slides a shared pill; the last crumb is marked as the current page.\n\n## Examples\n\n### Collapsed overflow\n\nPass `maxItems` to fold the middle into a `…` button that springs open into a popover.\n\n;\n}`}\n>\n \n\n\n## Props", "description": "A breadcrumb trail with a shared-element hover pill that springs between crumbs, animated path changes, and an overflow that collapses into a popover.", "keywords": [ "label", "href", "breadcrumbs", "items", "import", "from", "home", "icon", "components", "componentpreview" ], "metadata": { "title": "Breadcrumbs", "description": "A breadcrumb trail with a shared-element hover pill that springs between crumbs, animated path changes, and an overflow that collapses into a popover.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/navigation/breadcrumbs.mdx" } }, { "id": "c2edd99726c206d0", "url": "https://godui.design/docs/components/ai/prompt-composer", "title": "Prompt Composer (Part 1)", "content": "import { PromptComposerDemo } from \"@/components/demos/prompt-composer-demo\";\n\n {\n setStreaming(true);\n setTimeout(() => setStreaming(false), 2200);\n }}\n onStop={() => setStreaming(false)}\n />\n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nThe textarea auto-grows up to `maxRows`, then scrolls. Submit with the send\nbutton or ⌘/Ctrl + Enter. Drop or paste files to attach them as chips. While\n`isStreaming` is true, the send button cross-fades into a stop button.\n\n## Usage\n\n```tsx\nimport { PromptComposer } from \"@/components/godui/prompt-composer\";\n```\n\n```tsx\n send(text, attachments)}\n/>\n```\n\n### Controlled value\n\n```tsx\nconst [value, setValue] = useState(\"\");\n\n;\n```\n\n## Props", "description": "An AI input box with auto-growing textarea, attachment chips, an inline model picker, and a send button that morphs into a stop control while streaming.", "keywords": [ "value", "attachments", "promptcomposer", "string", "send", "button", "void", "fired", "model", "import" ], "metadata": { "title": "Prompt Composer", "description": "An AI input box with auto-growing textarea, attachment chips, an inline model picker, and a send button that morphs into a stop control while streaming.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/ai/prompt-composer.mdx" } }, { "id": "c3640df18b54be27", "url": "https://godui.design/docs/components/collaboration/comment-pin", "title": "Comment Pin (Part 1)", "content": "import { CommentPinDemo } from \"@/components/demos/comment-pin-demo\";\n\n\n console.log(text)}\n />\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nPosition a pin with `x`/`y` percentages inside a `relative` container. It\nsprings in, and clicking morphs out a thread popover with the comment list and\nan optional reply field. Resolved pins shrink and desaturate.\n\n## Usage\n\n```tsx\nimport { CommentPin } from \"@/components/godui/comment-pin\";\n```\n\n```tsx\n
\n \n
\n```\n\n## Props", "description": "Figma-style annotation pins that spring in over any surface and expand into a threaded comment popover with a reply field.", "keywords": [ "commentpin", "comments", "import", "commentpindemo", "from", "components", "relative", "author", "onreply", "text" ], "metadata": { "title": "Comment Pin", "description": "Figma-style annotation pins that spring in over any surface and expand into a threaded comment popover with a reply field.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/collaboration/comment-pin.mdx" } }, { "id": "c41cee4e2b23c0fa", "url": "https://godui.design/docs/components/effects/particle-dissolve", "title": "Particle Dissolve (Part 1)", "content": "import { ParticleDissolve } from \"@godui/components\";\nimport { ParticleDissolveDemo } from \"@/components/demos/particle-dissolve-demo\";\n\nThe 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.\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\nThe source is drawn to an offscreen canvas and sampled on a grid; every opaque\npixel becomes a particle whose colour is taken from the source (so images keep\ntheir colours). A single `requestAnimationFrame` loop eases a global\nform/scatter progress, with a per-particle delay for the stagger.\n\n## Usage\n\n```tsx\nimport { ParticleDissolve } from \"@/components/godui/particle-dissolve\";\n```\n\n### Text\n\n```tsx\n\n```\n\nThe particle colour follows the canvas's CSS `color`, so a Tailwind text utility\n(`text-primary`) just works — or pass an explicit `color`.\n\n### Image\n\n```tsx\n\n```\n\nImages must be same-origin or CORS-enabled to be sampled.\n\n### Modes & triggers\n\n`mode` sets the resting behaviour (`assemble`, `disperse`, or `loop`); `trigger`\ndecides when it starts (`mount`, `in-view`, or `hover`).\n\n```tsx\n\n```\n\n## Accessibility\n\nThe canvas exposes the text as its `aria-label` (`role=\"img\"`). When\n`prefers-reduced-motion` is set, the shape is drawn once, fully formed, with no\nanimation.\n\n## Props", "description": "Text or an image is sampled into particles that scatter and reform — a dramatic entrance or transition.", "keywords": [ "text", "particledissolve", "from", "import", "godui", "components", "particles", "mode", "loop", "trigger" ], "metadata": { "title": "Particle Dissolve", "description": "Text or an image is sampled into particles that scatter and reform — a dramatic entrance or transition.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/effects/particle-dissolve.mdx" } }, { "id": "c526036f583d5ef1", "url": "https://godui.design/docs/components/navigation/mega-menu", "title": "Mega Menu (Part 1)", "content": "import { MegaMenuDemo } from \"@/components/demos/mega-menu-demo\";\n\n },\n { label: \"Deploy\", href: \"#deploy\", description: \"Global edge\", icon: },\n ],\n },\n ],\n },\n {\n label: \"Resources\",\n sections: [\n {\n links: [\n { label: \"Docs\", href: \"#docs\", description: \"Guides and reference\", icon: },\n { label: \"Changelog\", href: \"#changelog\", description: \"What shipped\", icon: },\n ],\n },\n ],\n },\n { label: \"Pricing\", href: \"#pricing\" },\n];\n\nexport function MegaMenuDemo() {\n return ;\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { MegaMenu } from \"@/components/godui/mega-menu\";\n```\n\n```tsx\nconst items = [\n {\n label: \"Product\",\n sections: [\n {\n heading: \"Build\",\n links: [{ label: \"Editor\", href: \"/editor\", description: \"Write code\" }],\n },\n ],\n },\n { label: \"Pricing\", href: \"/pricing\" },\n];\n\n;\n```\n\nItems with `sections` open a panel on hover; items with only `href` render as plain links.\nHovering between triggers slides a shared highlight and morphs the panel height.\n\n## Props", "description": "A Vercel-style navigation menu with a direction-aware highlight and a panel that springs and height-morphs between triggers.", "keywords": [ "label", "href", "items", "description", "sections", "import", "from", "megamenu", "links", "editor" ], "metadata": { "title": "Mega Menu", "description": "A Vercel-style navigation menu with a direction-aware highlight and a panel that springs and height-morphs between triggers.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/navigation/mega-menu.mdx" } }, { "id": "c548678a2dfa8dda", "url": "https://godui.design/docs/components/navigation/breadcrumbs", "title": "Breadcrumbs (Part 2)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `items` | `BreadcrumbItem[]` | — | Crumbs: `{ label, href?, icon? }` |\n| `maxItems` | `number` | `0` | Collapse the middle past this count (0 = never) |\n| `separator` | `ReactNode` | chevron | Node rendered between crumbs |\n| `collapsible` | `boolean` | `true` | Allow the collapsed middle to expand |\n| `onNavigate` | `(href: string) => void` | — | Called on crumb click (prevents default) |", "description": "A breadcrumb trail with a shared-element hover pill that springs between crumbs, animated path changes, and an overflow that collapses into a popover.", "keywords": [ "label", "href", "breadcrumbs", "items", "import", "from", "home", "icon", "components", "componentpreview" ], "metadata": { "title": "Breadcrumbs", "description": "A breadcrumb trail with a shared-element hover pill that springs between crumbs, animated path changes, and an overflow that collapses into a popover.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/navigation/breadcrumbs.mdx" } }, { "id": "c58c0fcd62f9d9ec", "url": "https://godui.design/docs/components/text/elastic-text", "title": "Elastic Text (Part 1)", "content": "import { ElasticText } from \"@godui/components\";\n\n\n Design for Humans\n \n );\n}`}\n>\n \n Design for Humans\n \n\n\n## Installation\n\n\n\nElasticText animates the `wght` axis of your theme's sans font (`--font-sans`).\nWith a variable font like [Geist](https://vercel.com/font) the weight sweeps\nsmoothly; on a non-variable font it steps to the nearest available weight. No\nextra font dependency required.\n\n## Usage\n\n```tsx\nimport { ElasticText } from \"@/components/godui/elastic-text\";\n```\n\n### Auto (default)\n\nA spotlight sweeps across the text on its own, springing each character's weight up as it passes.\n\n```tsx\n\n Design for Humans\n\n```\n\nBy default the spotlight loops forever. Set `loop={false}` to run a single sweep out and back to rest:\n\n```tsx\n\n Plays once\n\n```\n\n### Hover\n\nThe weight emphasis follows the pointer while it's over the text.\n\n```tsx\n\n Move Your Mouse\n\n```\n\n## Examples\n\n### Hover\n\n`mode=\"hover\"` ties the weight emphasis to the pointer instead of an automatic spotlight.\n\n\n Move Your Mouse\n \n );\n}`}\n>\n \n Move Your Mouse\n \n\n\n### Plays once", "description": "Variable-font text whose weight springs up under an automatic spotlight or the pointer.", "keywords": [ "elastictext", "classname", "text-4xl", "hover", "weight", "auto", "componentpreview", "font", "spotlight", "text" ], "metadata": { "title": "Elastic Text", "description": "Variable-font text whose weight springs up under an automatic spotlight or the pointer.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/text/elastic-text.mdx" } }, { "id": "c9916f2575042a24", "url": "https://godui.design/docs/installation", "title": "Installation (Part 1)", "content": "GodUI is a design system built with Tailwind CSS v4 and React, distributed as a\n[shadcn](https://ui.shadcn.com) registry. Components are copied straight into\nyour project — you own the source.\n\n> **Note:** We have the exact same installation process as\n> [shadcn/ui](https://ui.shadcn.com/docs/installation). If you already use\n> shadcn, skip straight to step 2.\n\n## 1. Create project\n\nRun the `init` command to create a new project or to set up an existing one:\n\n```bash\npnpm dlx shadcn@latest init\n```\n\n## 2. Add components\n\nAdd any GodUI component with its registry URL — no configuration required:\n\n```bash\npnpm dlx shadcn@latest add https://godui.design/r/magic-button.json\n```\n\nThis copies the component into `components/godui/` and merges the GodUI theme\ntokens and component styles into your global stylesheet automatically.\n\n## Typography (bring your own font)\n\nGodUI is font-agnostic. The theme ships a neutral system font stack as the\ndefault, so components look right with zero setup. To use any font, override\n`--font-sans` (and optionally `--font-mono` / `--font-serif`) in your global\nstylesheet — everything inherits it.\n\n```css title=\"globals.css\"\n:root {\n --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif;\n}\n```\n\n### Optional: Geist (the GodUI brand font)\n\nThe docs site uses [Geist](https://vercel.com/font). To match it in a Next.js\napp, install `geist` and point `--font-sans` / `--font-mono` at its variables:\n\n```bash\npnpm add geist\n```\n\n```tsx title=\"app/layout.tsx\"\nimport { GeistMono, GeistSans } from \"geist/font\";\n\nexport default function RootLayout({ children }) {\n return (\n \n {children}\n \n );\n}\n```\n\n```css title=\"globals.css\"\n:root {\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n```\n\n## Dark mode", "description": "Install GodUI components with the shadcn CLI.", "keywords": [ "godui", "shadcn", "font", "html", "components", "your", "theme", "geist", "dark", "with" ], "metadata": { "title": "Installation", "description": "Install GodUI components with the shadcn CLI.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/installation.mdx" } }, { "id": "cc2017e462201d9c", "url": "https://godui.design/docs/components/buttons/shimmer-button", "title": "Shimmer Button (Part 1)", "content": "import { ShimmerButton } from \"@godui/components\";\n\n\n Primary\n Secondary\n Outline\n \n );\n}`}\n>\n
\n Primary\n Secondary\n Outline\n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { ShimmerButton } from \"@/components/godui/shimmer-button\";\n```\n\n```tsx\nClick me\n```\n\n## Examples\n\n### Sizes\n\n\n Small\n Medium\n Large\n \n );\n}`}\n>\n
\n Small\n Medium\n Large\n
\n\n\n### Without shimmer\n\nSet `shimmer={false}` to keep the button styling without the animated border light.\n\n\n\n## References\n\nThese principles aren't invented — they distil the established motion canon, and\nthe token values track it directly (durations map to Material 3's `short3 / short4\n/ medium2`; the spring presets mirror Material 3 Expressive's overshoot vs.\nsubdued schemes).\n\n- [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)\n- [Apple Human Interface Guidelines — Motion](https://developer.apple.com/design/human-interface-guidelines/motion)\n- [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)", "description": "The philosophy behind every animation in GodUI — twelve principles, each with a live demo.", "keywords": [ "motion", "material", "https", "principles", "motionprinciples", "animation", "interface", "these", "patterns", "guidelines" ], "metadata": { "title": "Motion Principles", "description": "The philosophy behind every animation in GodUI — twelve principles, each with a live demo.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/guidelines/principles.mdx" } }, { "id": "ccedf8965f5a0325", "url": "https://godui.design/docs/components/navigation/context-menu", "title": "Context Menu", "content": "import { ContextMenuDemo } from \"@/components/demos/context-menu-demo\";\n\n, shortcut: \"↵\", onSelect: () => setLast(\"Open\") },\n { label: \"Rename\", icon: , shortcut: \"⌘R\", onSelect: () => setLast(\"Rename\") },\n { type: \"separator\" },\n { label: \"Copy link\", icon: , shortcut: \"⌘C\", onSelect: () => setLast(\"Copy\") },\n { label: \"Share\", icon: , onSelect: () => setLast(\"Share\") },\n { type: \"separator\" },\n { label: \"Delete\", icon: , destructive: true, shortcut: \"⌫\", onSelect: () => setLast(\"Delete\") },\n ];\n\n return (\n \n
Right-click here
\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { ContextMenu } from \"@/components/godui/context-menu\";\n```\n\n```tsx\nconst items = [\n { label: \"Copy\", shortcut: \"⌘C\", onSelect: () => {} },\n { type: \"separator\" },\n { label: \"Delete\", destructive: true, onSelect: () => {} },\n];\n\n\n \n;\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `items` | `ContextMenuItem[]` | — | Items, separators, and labels |\n| `children` | `ReactNode` | — | The area that responds to right-click |", "description": "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.", "keywords": [ "label", "items", "onselect", "contextmenu", "setlast", "classname", "import", "from", "copy", "type" ], "metadata": { "title": "Context Menu", "description": "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.", "chunkIndex": 0, "totalChunks": 1, "sourcePath": "docs/components/navigation/context-menu.mdx" } }, { "id": "cdb25883876116d7", "url": "https://godui.design/docs/components/layout/scroll-stack", "title": "Scroll Stack (Part 1)", "content": "import { ScrollStack } from \"@godui/components\";\nimport { ScrollStackDemo } from \"@/components/demos/scroll-stack-demo\";\n\nEach 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.\n\n\n {cards.map((c) => (\n
\n

{c.eyebrow}

\n

{c.title}

\n

{c.body}

\n
\n ))}\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`ScrollStack` drives every card from a single scroll progress value. There is no\nscroll-jacking — the cards are plain `position: sticky` elements, and the scale,\nbrightness, and blur are interpolated from how far each card has been buried.\n\n## Usage\n\n```tsx\nimport { ScrollStack } from \"@/components/godui/scroll-stack\";\n```", "description": "Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section.", "keywords": [ "scrollstack", "card", "from", "cards", "stack", "scroll", "title", "height", "classname", "blur" ], "metadata": { "title": "Scroll Stack", "description": "Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/scroll-stack.mdx" } }, { "id": "ce3530a8be6b643d", "url": "https://godui.design/docs/components/layout/tilt-card", "title": "Tilt Card (Part 2)", "content": "| Prop | Type | Default | Description |\n| --------- | --------- | ------- | ---------------------------------------------------- |\n| `maxTilt` | `number` | `12` | Maximum tilt in degrees toward the pointer. |\n| `scale` | `number` | `1.03` | Hover scale applied to the whole card. |\n| `depth` | `number` | `40` | Float the content layer toward the viewer (px). |\n| `glare` | `boolean` | `true` | Render a specular glare that follows the pointer. |\n\n`TiltCard` also forwards every standard `
` attribute to the root element.", "description": "A card that tilts in 3D toward the pointer with parallax depth and a specular glare.", "keywords": [ "tiltcard", "classname", "depth", "maxtilt", "import", "from", "components", "componentpreview", "w-72", "pointer" ], "metadata": { "title": "Tilt Card", "description": "A card that tilts in 3D toward the pointer with parallax depth and a specular glare.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/layout/tilt-card.mdx" } }, { "id": "ce4f012a004c08ff", "url": "https://godui.design/docs/components/backgrounds/liquid-metaballs", "title": "Liquid Metaballs (Part 2)", "content": "\n \n
\n );\n}`}\n>\n
\n \n
\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `blobCount` | `number` | `7` | Number of floating blobs. |\n| `colors` | `string[]` | indigo/violet/pink/cyan | Blob colors (cycled). |\n| `speed` | `number` | `1` | Drift speed multiplier. |\n| `gooeyness` | `number` | `16` | Goo strength (blur stdDeviation). |\n| `interactive` | `boolean` | `true` | A blob follows the cursor (adds a pointer listener). |\n\nAlso accepts standard `div` attributes (e.g. `className`, `style`).", "description": "Gooey blobs that drift, collide, and merge under an SVG goo filter — with a cursor blob.", "keywords": [ "classname", "liquidmetaballs", "relative", "overflow-hidden", "import", "from", "godui", "components", "cursor", "componentpreview" ], "metadata": { "title": "Liquid Metaballs", "description": "Gooey blobs that drift, collide, and merge under an SVG goo filter — with a cursor blob.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/backgrounds/liquid-metaballs.mdx" } }, { "id": "d003fb081db3bdfb", "url": "https://godui.design/docs/components/overlays/animated-tooltip", "title": "Animated Tooltip (Part 1)", "content": "import { AnimatedTooltipDemo } from \"@/components/demos/animated-tooltip-demo\";\n\n\n {team.map((m) => (\n {m.name}{m.role}}\n >\n \n {m.initials}\n \n \n ))}\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`AnimatedTooltip` wraps any trigger. On hover or focus the tooltip springs in and\ntilts toward the pointer in 3D, following the cursor across the trigger.\n\n## Usage\n\n```tsx\nimport { AnimatedTooltip } from \"@/components/godui/animated-tooltip\";\n```\n\n```tsx\n\n \n\n```\n\n### Side\n\n```tsx\n\n \n\n```\n\n## Props", "description": "A tooltip that springs in and tilts in 3D as the pointer moves across its trigger.", "keywords": [ "animatedtooltip", "span", "classname", "name", "content", "role", "initials", "gradient", "trigger", "tooltip" ], "metadata": { "title": "Animated Tooltip", "description": "A tooltip that springs in and tilts in 3D as the pointer moves across its trigger.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/overlays/animated-tooltip.mdx" } }, { "id": "d0acfeaabbfa0caf", "url": "https://godui.design/docs/components/layout/avatar-group", "title": "Avatar Group (Part 1)", "content": "import { AvatarGroup } from \"@godui/components\";\n\nexport const people = [\n { src: \"https://i.pravatar.cc/80?img=1\", alt: \"Ada\" },\n { src: \"https://i.pravatar.cc/80?img=2\", alt: \"Carl\" },\n { src: \"https://i.pravatar.cc/80?img=3\", alt: \"Eve\" },\n { src: \"https://i.pravatar.cc/80?img=4\", alt: \"Gus\" },\n { src: \"https://i.pravatar.cc/80?img=5\", alt: \"Ivy\" },\n { src: \"https://i.pravatar.cc/80?img=6\", alt: \"Jo\" },\n];\n\n;\n}`}\n>\n \n\n\n## Sizes\n\n\n \n \n \n \n );\n}`}\n>\n
\n \n \n \n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { AvatarGroup } from \"@godui/components\";\n\n;\n```\n\n## Props", "description": "Overlapping avatars that fan apart on hover, with a +N overflow chip.", "keywords": [ "avatars", "avatargroup", "people", "size", "https", "pravatar", "import", "from", "godui", "components" ], "metadata": { "title": "Avatar Group", "description": "Overlapping avatars that fan apart on hover, with a +N overflow chip.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/avatar-group.mdx" } }, { "id": "d26f89b4485050d1", "url": "https://godui.design/docs/components/layout/progressive-card-reveal", "title": "Progressive Card Reveal (Part 3)", "content": "`ProgressiveCardReveal` is a compound component. The root is **controlled** via\n`activeIndex` — keep it in state and update it from `onActiveChange`. Each\n`Card` declares two views with the `CardCollapsed` and `CardExpanded` slots; the\ncard derives its index from its position, so you never pass an index manually.\n\n```tsx\nconst [active, setActive] = useState(0);\n\n\n \n Flight — ~3 hours\n {/* full content */}\n \n \n Driving — ~18 hours\n {/* full content */}\n \n\n```\n\nClicking a collapsed card fires `onActiveChange(index)`. Clicking the\nalready-expanded card is a no-op — one card stays open at all times. The\ntransition respects `prefers-reduced-motion`, switching instantly when reduced\nmotion is requested.\n\n## Props\n\n### ProgressiveCardReveal\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `activeIndex` | `number` | — | Index of the expanded card (controlled). |\n| `onActiveChange` | `(index: number) => void` | — | Fired when a collapsed card is activated. |\n| `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. |\n\nAlso accepts all `div` attributes (e.g. `className`).\n\n### ProgressiveCardReveal.Card\n\nAccepts all `div` attributes. Children must be a `CardCollapsed` and a\n`CardExpanded` slot.\n\n### ProgressiveCardReveal.CardCollapsed / CardExpanded", "description": "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.", "keywords": [ "progressivecardreveal", "card", "classname", "span", "cardcollapsed", "cardexpanded", "time", "label", "hours", "from" ], "metadata": { "title": "Progressive Card Reveal", "description": "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.", "chunkIndex": 2, "totalChunks": 4, "sourcePath": "docs/components/layout/progressive-card-reveal.mdx" } }, { "id": "d284a8e3715e6acc", "url": "https://godui.design/docs/components/collaboration/notification-inbox", "title": "Notification Inbox (Part 2)", "content": "| Prop | Type | Default | Description |\n| --------------- | ------------------------- | --------- | ----------------------------------- |\n| `notifications` | `Notification[]` | — | Items to render, grouped by `group`.|\n| `onRead` | `(id: string) => void` | — | Fired when a row is clicked. |\n| `onArchive` | `(id: string) => void` | — | Fired when a row is swiped away. |\n| `onMarkAllRead` | `() => void` | — | Fired by the mark-all-read action. |\n| `title` | `string` | `\"Inbox\"` | Header title. |", "description": "A Linear-style notification center with time-bucketed groups, unread accent rails, swipe-to-archive, mark-all-read, and a polished empty state.", "keywords": [ "notificationinbox", "group", "import", "from", "items", "notifications", "notificationinboxdemo", "components", "setitems", "action" ], "metadata": { "title": "Notification Inbox", "description": "A Linear-style notification center with time-bucketed groups, unread accent rails, swipe-to-archive, mark-all-read, and a polished empty state.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/collaboration/notification-inbox.mdx" } }, { "id": "d2dac288223fbb74", "url": "https://godui.design/docs/components/layout/animated-testimonials", "title": "Animated Testimonials (Part 1)", "content": "import { AnimatedTestimonials } from \"@godui/components\";\n\nexport const demoTestimonials = [\n {\n quote: \"GodUI shipped the smoothest interactions I've put in production this year.\",\n name: \"Ada Lovelace\",\n role: \"Design Engineer, Analytical\",\n src: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&q=80\",\n },\n {\n quote: \"Spring physics out of the box. Everything just feels expensive.\",\n name: \"Grace Hopper\",\n role: \"Staff Engineer, Compiler Co.\",\n src: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&q=80\",\n },\n];\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\n`AnimatedTestimonials` shuffles a stack of portraits while the quote reveals\nword-by-word and the name crossfades. It autoplays and exposes manual controls.\n\n## Usage\n\n```tsx\nimport { AnimatedTestimonials } from \"@/components/godui/animated-testimonials\";\n```\n\n```tsx\nconst testimonials = [\n { quote: \"…\", name: \"Ada Lovelace\", role: \"Design Engineer\", src: \"/ada.jpg\" },\n { quote: \"…\", name: \"Grace Hopper\", role: \"Staff Engineer\", src: \"/grace.jpg\" },\n];\n\n;\n```\n\n## Props", "description": "A testimonial carousel with a shuffling image stack and crossfading quotes.", "keywords": [ "testimonials", "animatedtestimonials", "quote", "name", "role", "engineer", "godui", "grace", "import", "from" ], "metadata": { "title": "Animated Testimonials", "description": "A testimonial carousel with a shuffling image stack and crossfading quotes.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/animated-testimonials.mdx" } }, { "id": "d6543ff45c1d7909", "url": "https://godui.design/docs/components/effects/image-trail", "title": "Image Trail (Part 1)", "content": "import { ImageTrail } from \"@godui/components\";\nimport { ImageTrailDemo } from \"@/components/demos/image-trail-demo\";\n\nAs the pointer moves across the area, images are emitted along its path — each pops in, tilts toward the direction of travel, then drifts up and fades. Move your cursor across the frame below.\n\n\n

Move your cursor

\n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`ImageTrail` keeps a fixed, recycled pool of `` elements and drives every\nspawn with the Web Animations API and direct style writes — no React re-render\nper pointer move, so it stays smooth even at high cursor speed. A new image is\nonly emitted once the pointer has travelled `threshold` pixels from the last one,\nwhich gives even spacing regardless of speed.\n\n## Usage\n\n```tsx\nimport { ImageTrail } from \"@/components/godui/image-trail\";\n```\n\n```tsx\n\n

Move your cursor

\n\n```\n\n### Tuning the trail\n\n```tsx\n\n```\n\n## Accessibility\n\nWhen `prefers-reduced-motion` is set, the trail is disabled and a calm static\ngallery of the images is shown instead. Trail images are decorative\n(`aria-hidden`), so place real content as children.\n\n## Props", "description": "Images spawn along the pointer's path, pop in, and drift away — the signature portfolio hover effect.", "keywords": [ "images", "imagetrail", "photos", "from", "pointer", "trail", "import", "components", "move", "cursor" ], "metadata": { "title": "Image Trail", "description": "Images spawn along the pointer's path, pop in, and drift away — the signature portfolio hover effect.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/effects/image-trail.mdx" } }, { "id": "d785d4a81ebb36cb", "url": "https://godui.design/docs/components/navigation/filter-bar", "title": "Filter Bar (Part 1)", "content": "import { FilterBarDemo } from \"@/components/demos/filter-bar-demo\";\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { FilterBar } from \"@/components/godui/filter-bar\";\n```\n\n```tsx\nconst facets = [\n {\n id: \"status\",\n label: \"Status\",\n options: [{ label: \"Open\", value: \"open\", count: 12 }],\n },\n];\n\nconst [value, setValue] = useState({});\n\n;\n```\n\n`value` is a `Record`. Each facet pill shows its current\nselection inline (`Status: Open +2`) and clears with the inline `×`.\n\n## Props", "description": "A faceted filter bar with searchable multi-select popovers, count badges, and selections that spring inline into each facet pill.", "keywords": [ "value", "label", "count", "facets", "status", "string", "import", "from", "filterbar", "const" ], "metadata": { "title": "Filter Bar", "description": "A faceted filter bar with searchable multi-select popovers, count badges, and selections that spring inline into each facet pill.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/navigation/filter-bar.mdx" } }, { "id": "d7a20212f8c2fc08", "url": "https://godui.design/docs/components/index", "title": "Components (Part 9)", "content": "\n \n An animated beam of light that travels around the border of its container.\n \n \n A physics-based confetti burst with an imperative fire API for celebratory\n moments.\n \n \n A spring-lagged blend-mode cursor that trails the pointer and swells over\n interactive elements.\n \n \n Images spawn along the pointer's path, pop in, and drift away — the signature\n portfolio hover effect.\n \n \n A conic-gradient lamp that ignites and reveals a headline as it scrolls into\n view.\n \n \n A premium hover effect that ripples and distorts an image like liquid,\n intensifying with cursor speed.\n \n \n An infinite, seamless scrolling row or column of content that pauses on\n hover.\n \n \n Text or an image is sampled into particles that scatter and reform — a\n dramatic entrance or transition.\n \n \n A spring-smoothed reading indicator — a pinned top bar or a fading\n back-to-top ring.\n \n \n Reveals its children with a spring as they scroll into view, with optional\n velocity skew.\n \n \n A card with a radial spotlight glow that follows the pointer and lights the\n border.\n \n \n A cursor-following flashlight that cuts through the top layer to expose a\n hidden layer beneath.\n \n", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 8, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "d84cbf489657b49b", "url": "https://godui.design/docs/components/collaboration/comment-pin", "title": "Comment Pin (Part 2)", "content": "| Prop | Type | Default | Description |\n| -------------- | ------------------------- | ------- | ---------------------------------------- |\n| `x` / `y` | `number` | — | Position as a percentage of container. |\n| `comments` | `Comment[]` | `[]` | Thread comments. |\n| `label` | `ReactNode` | — | Pin face (defaults to author initials). |\n| `resolved` | `boolean` | `false` | Shrink + desaturate the pin. |\n| `open` | `boolean` | — | Controlled open state. |\n| `onOpenChange` | `(open: boolean) => void` | — | Fired when the thread toggles. |\n| `onReply` | `(text: string) => void` | — | Enables and handles the reply field. |", "description": "Figma-style annotation pins that spring in over any surface and expand into a threaded comment popover with a reply field.", "keywords": [ "commentpin", "comments", "import", "commentpindemo", "from", "components", "relative", "author", "onreply", "text" ], "metadata": { "title": "Comment Pin", "description": "Figma-style annotation pins that spring in over any surface and expand into a threaded comment popover with a reply field.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/collaboration/comment-pin.mdx" } }, { "id": "db1268a278d3132e", "url": "https://godui.design/docs/components/backgrounds/blueprint-grid", "title": "Blueprint Grid (Part 2)", "content": "export function BlueprintGridDots() {\n return (\n
\n \n
\n );\n}`}\n>\n
\n \n
\n\n\n### Perspective\n\n\n \n \n );\n}`}\n>\n
\n \n
\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `variant` | `\"lines\" \\| \"dots\" \\| \"perspective\"` | `\"lines\"` | Grid style. |\n| `cellSize` | `number` | `32` | Cell size (px). |\n| `color` | `string` | `--color-border` | Line / dot color. |\n| `sweep` | `boolean` | `true` | Diagonal light sweep. |\n| `sweepDuration` | `number` | `8` | Seconds per sweep pass. |\n| `spotlight` | `boolean` | `true` | Cursor spotlight that lights up nearby cells (ignored for `perspective`). |\n| `spotlightColor` | `string` | `--color-primary` | Color the spotlit cells light up in. |\n| `spotlightRadius` | `number` | `200` | Spotlight radius (px). |\n\nAlso accepts standard `div` attributes (e.g. `className`, `style`).", "description": "A technical lattice — lines, dots, or a perspective floor — with a light sweep and cursor spotlight.", "keywords": [ "classname", "blueprintgrid", "relative", "overflow-hidden", "perspective", "componentpreview", "w-full", "bg-background", "color", "import" ], "metadata": { "title": "Blueprint Grid", "description": "A technical lattice — lines, dots, or a perspective floor — with a light sweep and cursor spotlight.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/backgrounds/blueprint-grid.mdx" } }, { "id": "db53ac7fdcd92bb5", "url": "https://godui.design/docs/components/layout/progressive-card-reveal", "title": "Progressive Card Reveal (Part 4)", "content": "Slot wrappers — their children are the collapsed (pill) and expanded views.", "description": "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.", "keywords": [ "progressivecardreveal", "card", "classname", "span", "cardcollapsed", "cardexpanded", "time", "label", "hours", "from" ], "metadata": { "title": "Progressive Card Reveal", "description": "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.", "chunkIndex": 3, "totalChunks": 4, "sourcePath": "docs/components/layout/progressive-card-reveal.mdx" } }, { "id": "dc68ac22afea4f72", "url": "https://godui.design/docs/components/index", "title": "Components (Part 12)", "content": "## Glass\n\n\n \n A glass panel that refracts the content behind it with a mouse-tracked\n specular highlight.\n \n \n A circular glass lens that floats over your content and follows the cursor,\n refracting everything beneath it.\n \n", "description": "Browse the full GodUI component collection.", "keywords": [ "previewcard", "components", "href", "docs", "title", "with", "that", "cards", "text", "navigation" ], "metadata": { "title": "Components", "description": "Browse the full GodUI component collection.", "chunkIndex": 11, "totalChunks": 12, "sourcePath": "docs/components/index.mdx" } }, { "id": "dd8ece59f4e65175", "url": "https://godui.design/docs/components/navigation/combobox", "title": "Combobox (Part 1)", "content": "import { ComboboxDemo, ComboboxAsyncDemo } from \"@/components/demos/combobox-demo\";\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { Combobox } from \"@/components/godui/combobox\";\n```\n\n```tsx\nconst [value, setValue] = useState(\"\");\n\n;\n```\n\n## Examples\n\n### Async search\n\nPass `onSearch` to resolve options for a query — it debounces input and shows a\nloading state while results arrive.\n\n {\n const res = await fetch(\\`/api/search?q=\\${q}\\`);\n return res.json();\n }}\n />\n );\n}`}\n>\n \n\n\n## Props", "description": "A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state.", "keywords": [ "value", "combobox", "description", "label", "options", "import", "from", "const", "components", "componentpreview" ], "metadata": { "title": "Combobox", "description": "A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/navigation/combobox.mdx" } }, { "id": "e0a576edf2c6392e", "url": "https://godui.design/docs/components/text/text-scramble", "title": "Text Scramble (Part 1)", "content": "import { TextScramble } from \"@godui/components\";\nimport { TextScrambleDemo } from \"@/components/demos/text-scramble-demo\";\n\nEach 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.\n\n;\n}`}\n>\n \n\n\n## Installation\n\n\n\nEach position is given a staggered start and end frame; before its start it\nshows the previous character, between them a random glyph from the charset, and\nafter, the resolved character. Changing `text` animates from the current string\nto the next, so only the differing characters move.\n\n## Usage\n\n```tsx\nimport { TextScramble } from \"@/components/godui/text-scramble\";\n```\n\n```tsx\n\n```\n\n### Charsets\n\nChoose `alphanumeric`, `symbols`, `katakana`, or `binary` — or pass your own\nstring of glyphs.\n\n```tsx\n\n\n```\n\n### Triggers\n\n`mount` runs once on load, `in-view` waits until scrolled into view, and `hover`\nruns on pointer enter.\n\n```tsx\n\n```\n\n### Tuning\n\n`speed` is the ms per frame (lower is faster); `spread` is how widely the\nper-character stagger is spread.\n\n```tsx\n\n```\n\n## Accessibility", "description": "Characters cycle through random glyphs and resolve into the target text — a decrypt / matrix reveal.", "keywords": [ "text", "textscramble", "from", "charset", "string", "spread", "import", "components", "resolved", "hover" ], "metadata": { "title": "Text Scramble", "description": "Characters cycle through random glyphs and resolve into the target text — a decrypt / matrix reveal.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/text/text-scramble.mdx" } }, { "id": "e1ef3b5e40c8fca8", "url": "https://godui.design/docs/components/overlays/drawer", "title": "Drawer (Part 2)", "content": "Set `side=\"bottom\"` for a mobile-style sheet — drag the handle (or flick) down to\ndismiss. Great for share menus, quick actions, and confirmations.\n\n…`}>\n \n\n\n## Props\n\n| Prop | Type | Default | Description |\n| -------------- | -------------------------- | ---------- | ---------------------------------------- |\n| `open` | `boolean` | — | Controlled open state. |\n| `onOpenChange` | `(open: boolean) => void` | — | Called when the drawer opens or closes. |\n| `side` | `\"bottom\" \\| \"right\"` | `\"bottom\"` | Side the drawer slides in from. |\n| `title` | `ReactNode` | — | Accessible title rendered at the top. |\n| `className` | `string` | — | Extra classes for the panel. |", "description": "A draggable bottom sheet with rubber-band physics, snap points, and flick-to-dismiss.", "keywords": [ "drawer", "open", "setopen", "side", "from", "import", "button", "classname", "title", "bottom" ], "metadata": { "title": "Drawer", "description": "A draggable bottom sheet with rubber-band physics, snap points, and flick-to-dismiss.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/overlays/drawer.mdx" } }, { "id": "e2f5bf47c090ff7a", "url": "https://godui.design/docs/components/layout/swipe-deck", "title": "Swipe Deck (Part 1)", "content": "import { SwipeDeck } from \"@godui/components\";\nimport { SwipeDeckDemo } from \"@/components/demos/swipe-deck-demo\";\n\nA 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.\n\n console.log(i, dir)}>\n \n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\nThe front card is a draggable spring; its rotation is mapped from the drag\ndistance and the intent badges fade in as you pass a small offset. A release\npast `threshold` — or a fast enough flick — dismisses it with momentum, and the\ndeck behind springs up a rank.\n\n## Usage\n\n```tsx\nimport { SwipeDeck } from \"@/components/godui/swipe-deck\";\n```\n\n```tsx\n save(index, direction)}>\n One\n Two\n Three\n\n```\n\n### Looping\n\nWith `loop`, swiped cards are re-appended so the deck never empties — handy for\ntestimonial reels.\n\n```tsx\n{/* cards */}\n```\n\n### Custom action labels\n\n```tsx\n{/* cards */}\n```\n\n## Accessibility\n\nThe deck is a focusable group: ← and → swipe, and the\nlabelled buttons below do the same. When `prefers-reduced-motion` is set, the\nspring settling is removed.\n\n## Props", "description": "A physics, Tinder-style swipeable card deck with throw-to-dismiss, directional intent, and keyboard controls.", "keywords": [ "swipedeck", "card", "from", "import", "components", "drag", "loop", "actions", "left", "right" ], "metadata": { "title": "Swipe Deck", "description": "A physics, Tinder-style swipeable card deck with throw-to-dismiss, directional intent, and keyboard controls.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/layout/swipe-deck.mdx" } }, { "id": "e357e7323a5cb8be", "url": "https://godui.design/docs/components/navigation/resizable-header", "title": "Resizable Header (Part 2)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `logo` | `ReactNode` | `\"GodUI\"` | Brand mark on the left |\n| `links` | `HeaderLink[]` | `[]` | Navigation links: `{ label, href }` |\n| `activeHref` | `string` | — | `href` of the active link |\n| `cta` | `ReactNode` | — | Call-to-action node on the right |\n| `scrollThreshold` | `number` | `24` | Scroll px before the bar morphs to a pill |\n| `sticky` | `boolean` | `true` | Stick the header to the top |\n| `scrollRef` | `RefObject` | — | Scroll container to track (defaults to window) |\n| `onNavigate` | `(href: string) => void` | — | Called on link click (prevents default) |", "description": "A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator.", "keywords": [ "links", "href", "label", "scrollref", "resizableheader", "product", "import", "from", "const", "pricing" ], "metadata": { "title": "Resizable Header", "description": "A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator.", "chunkIndex": 1, "totalChunks": 2, "sourcePath": "docs/components/navigation/resizable-header.mdx" } }, { "id": "e3c46cc60b496d74", "url": "https://godui.design/docs/components/inputs/magic-input", "title": "Magic Input (Part 4)", "content": "```tsx\nimport { MagicInput } from \"@/components/godui/magic-input\";\n```\n\n```tsx\n\n```\n\nBy default the input is flat and lifts into the 3D effect only while focused.\nSet `depth=\"always\"` to keep the raised look at rest, and `rainbow={false}` to\ndisable the animated rainbow edge.\n\n```tsx\n\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `variant` | `\"primary\" \\| \"secondary\"` | `\"primary\"` | 3D edge color scheme (visible when `rainbow={false}`) |\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Input padding and text size |\n| `depth` | `\"focus\" \\| \"always\"` | `\"focus\"` | Show the 3D depth only on focus, or always |\n| `rainbow` | `boolean` | `true` | Animate the edge and shadow with a rainbow gradient while focused |\n| `submitButton` | `boolean` | `false` | Show the arrow submit button (`type=\"submit\"`) |\n| `onSubmit` | `(value: string) => void` | — | Fires with the value on click / Enter; also shows the button |\n| `submitLabel` | `string` | `\"Submit\"` | Accessible label for the submit button |\n| `status` | `\"idle\" \\| \"loading\" \\| \"success\" \\| \"error\"` | `\"idle\"` | Submit lifecycle state |\n| `progress` | `number` | — | 0–100; makes `loading` determinate (omit for indeterminate) |", "description": "A 3D layered text input that lifts on focus with an optional rainbow edge animation.", "keywords": [ "magicinput", "placeholder", "rainbow", "status", "false", "componentpreview", "classname", "flex", "w-full", "max-w-xs" ], "metadata": { "title": "Magic Input", "description": "A 3D layered text input that lifts on focus with an optional rainbow edge animation.", "chunkIndex": 3, "totalChunks": 4, "sourcePath": "docs/components/inputs/magic-input.mdx" } }, { "id": "e436e8cb55835e87", "url": "https://godui.design/docs/components/effects/liquid-image", "title": "Liquid Image (Part 1)", "content": "import { LiquidImage } from \"@godui/components\";\nimport { LiquidImageDemo } from \"@/components/demos/liquid-image-demo\";\n\nHover 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.\n\n\n \n \n \n \n );\n}`}\n>\n \n\n\n## Installation\n\n\n\n`LiquidImage` distorts the image with an SVG `feTurbulence` + `feDisplacementMap`\nfilter — supported in every modern browser. The displacement scale is eased\ntoward its target in a single `requestAnimationFrame` loop and written straight\nto the filter, so the image itself never re-renders. Cursor velocity intensifies\nthe ripple; leaving the image lets it settle back with a damped wave.\n\n## Usage\n\n```tsx\nimport { LiquidImage } from \"@/components/godui/liquid-image\";\n```\n\n```tsx\n\n```\n\n### Always on\n\nSet `trigger=\"always\"` for a continuously breathing ripple, independent of hover.\n\n```tsx\n\n```\n\n### Tuning the ripple\n\n`strength` is the peak displacement in pixels; `frequency` controls the ripple\nscale — smaller is larger and smoother.\n\n```tsx\n\n```\n\n## Accessibility & fallback", "description": "A premium hover effect that ripples and distorts an image like liquid, intensifying with cursor speed.", "keywords": [ "liquidimage", "ripple", "hover", "image", "classname", "always", "import", "from", "components", "mountain" ], "metadata": { "title": "Liquid Image", "description": "A premium hover effect that ripples and distorts an image like liquid, intensifying with cursor speed.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/effects/liquid-image.mdx" } }, { "id": "e4706fb6b7141d95", "url": "https://godui.design/docs/components/effects/border-beam", "title": "Border Beam (Part 2)", "content": "```tsx\n\n \n \n\n```\n\n## Examples\n\nThe previews below use a plain `relative overflow-hidden` card so the example is\nself-contained — drop `BorderBeam` into your own `Card` the same way.\n\n### Reverse\n\nSet `reverse` to send the beam counter-clockwise.\n\n\n

Counter-clockwise beam.

\n \n \n );\n}`}\n>\n
\n

Counter-clockwise beam.

\n \n
\n\n\n### Glow\n\n`glow` renders a soft blurred echo behind the beam for a neon look.\n\n\n

Glowing beam.

\n \n \n );\n}`}\n>\n
\n

Glowing beam.

\n \n
\n\n\n### Thick colored\n\nTurn `rainbow` off and pass `colorFrom` / `colorTo` to drive your own gradient,\nwith a wider `borderWidth`.\n\n\n \n
\n

Fluid by nature

\n

Move your cursor to stir the goo.

\n
\n \n );\n}`}\n>\n
\n \n
\n

Fluid by nature

\n

Move your cursor to stir the goo.

\n
\n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { LiquidMetaballs } from \"@/components/godui/liquid-metaballs\";\n\n
\n \n \n
\n```\n\nThe layer is `absolute inset-0 z-base`; parent must be `relative`, content at\n`z-raised`+. The goo filter id is per-instance, so multiple metaball backgrounds\ncoexist safely. Pauses off-screen and on hidden tabs; freezes under\n`prefers-reduced-motion`.\n\n## Examples\n\n### Extra gooey\n\nRaise `gooeyness` and `blobCount`.", "description": "Gooey blobs that drift, collide, and merge under an SVG goo filter — with a cursor blob.", "keywords": [ "classname", "liquidmetaballs", "relative", "overflow-hidden", "import", "from", "godui", "components", "cursor", "componentpreview" ], "metadata": { "title": "Liquid Metaballs", "description": "Gooey blobs that drift, collide, and merge under an SVG goo filter — with a cursor blob.", "chunkIndex": 0, "totalChunks": 2, "sourcePath": "docs/components/backgrounds/liquid-metaballs.mdx" } }, { "id": "e7646c322ac2c797", "url": "https://godui.design/docs/components/effects/border-beam", "title": "Border Beam (Part 4)", "content": "| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `size` | `number` | `60` | Side length (px) of the beam — larger reads as a longer streak. |\n| `duration` | `number` | `6` | Seconds for one full loop around the border. |\n| `delay` | `number` | `0` | Seconds to delay the start of the loop. |\n| `rainbow` | `boolean` | `true` | Use the flowing rainbow gradient (shared with MagicButton). Overrides `colorFrom`/`colorTo`. |\n| `colorFrom` | `string` | `var(--chart-1)` | Leading edge color when `rainbow` is off. |\n| `colorTo` | `string` | `var(--chart-5)` | Mid color when `rainbow` is off. |\n| `borderWidth` | `number` | `1` | Border thickness (px) the beam rides along. |\n| `reverse` | `boolean` | `false` | Travel counter-clockwise. |\n| `initialOffset` | `number` | `0` | Starting position along the border (0–100%). |\n| `glow` | `boolean` | `false` | Render a soft blurred echo behind the beam. |\n\nAlso accepts standard `div` attributes (e.g. `className`, `style`).", "description": "An animated beam of light that travels around the border of its container.", "keywords": [ "borderbeam", "classname", "card", "relative", "overflow-hidden", "border", "size", "beam", "components", "import" ], "metadata": { "title": "Border Beam", "description": "An animated beam of light that travels around the border of its container.", "chunkIndex": 3, "totalChunks": 4, "sourcePath": "docs/components/effects/border-beam.mdx" } }, { "id": "e95145ecac328607", "url": "https://godui.design/docs/components/backgrounds/light-rays", "title": "Light Rays (Part 1)", "content": "import { LightRays } from \"@godui/components\";\n\nA soft fan of volumetric light rays beams down from above, slowly sweeping and\nbreathing in intensity, finished with a layer of film grain. Cinematic and warm —\nthe spotlight-from-the-heavens hero. Pure CSS. Drop it as the first child of a\n`relative overflow-hidden` container.\n\n\n \n
\n

Step into the light

\n

God-rays that gently breathe.

\n
\n \n );\n}`}\n>\n
\n \n
\n

Step into the light

\n

God-rays that gently breathe.

\n
\n
\n\n\n## Installation\n\n\n\n## Usage\n\n```tsx\nimport { LightRays } from \"@/components/godui/light-rays\";\n\n
\n \n \n
\n```\n\nThe layer is `absolute inset-0 z-base`; parent must be `relative overflow-hidden`,\ncontent at `z-raised`+. Color defaults to `--color-primary`. The sweep stops under\n`prefers-reduced-motion`; the static fan remains.\n\n## Examples\n\n### Warm\n\n\n Parallax label\n Centered label\n`}\n>\n
\n Parallax label\n Centered label\n
\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------- | ----------------------------------------- | ----------- | ---------------------------------------------------------------- |\n| `variant` | `\"default\" \\| \"secondary\" \\| \"outline\"` | `\"default\"` | Visual style. |\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Padding and text size. |\n| `strength` | `number` | `0.4` | How strongly the button follows the cursor (0–1). |\n| `range` | `number` | `0` | Invisible sensor padding in px around the button. |\n| `staticLabel` | `boolean` | `false` | Keep the label centered in the button (rides with the shell, no drift). |\n\n`MagneticButton` also forwards every standard `