{ "$schema": "https://ui.shadcn.com/schema.json", "name": "gammaui", "homepage": "https://gammaui.com", "items": [ { "name": "index", "type": "registry:style", "dependencies": [ "class-variance-authority", "lucide-react" ], "devDependencies": [ "tw-animate-css" ], "registryDependencies": [ "utils" ], "cssVars": {} }, { "name": "data-feeding-in", "type": "registry:ui", "title": "Data Feeding In", "description": "An animated data ingestion visualization with flowing SVG paths, pulsing gradient beams, and a staggered table reveal using Framer Motion.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/data-feeding-in.tsx", "type": "registry:ui" } ] }, { "name": "aurora-glass", "type": "registry:ui", "title": "Aurora Glass", "description": "A shimmering glass tile background with ripple layers, bevel shading, and chromatic spread.", "dependencies": [ "react" ], "files": [ { "path": "registry/gammaui/aurora-glass.tsx", "type": "registry:ui" } ] }, { "name": "live-waveform", "type": "registry:ui", "title": "Live Waveform", "description": "A customizable live audio waveform visualizer using the Web Audio API.", "dependencies": [ "react" ], "files": [ { "path": "registry/gammaui/live-waveform.tsx", "type": "registry:ui" } ] }, { "name": "support-box", "type": "registry:ui", "title": "Support Box", "description": "A collapsible animated support widget for quick help actions using Framer Motion.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/support-box.tsx", "type": "registry:ui" } ] }, { "name": "overlay-button", "type": "registry:ui", "title": "Overlay Button", "description": "An animated gradient button using Framer Motion with looping motion and spring transitions.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/overlay-button.tsx", "type": "registry:ui" } ] }, { "name": "border-button", "type": "registry:ui", "title": "Border Button", "description": "A reactive border animation button that follows cursor movement using Framer Motion and CSS masks.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/border-button.tsx", "type": "registry:ui" } ] }, { "name": "wavy-text-block", "type": "registry:ui", "title": "Wavy Text Block", "description": "A scroll-triggered wavy text animation component that creates flowing motion effects using Framer Motion and scroll context.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/wavy-text-block.tsx", "type": "registry:ui" } ] }, { "name": "inverted-cursor", "type": "registry:ui", "title": "Inverted Cursor", "description": "A smooth, animated custom cursor component with blend mode effects.", "dependencies": [ "react" ], "files": [ { "path": "registry/gammaui/inverted-cursor.tsx", "type": "registry:ui" } ] }, { "name": "pixel-button", "type": "registry:ui", "title": "Pixel Button", "description": "A pixelated button animation effect built with Tailwind CSS and React.", "dependencies": [ "react" ], "files": [ { "path": "registry/gammaui/pixel-button.tsx", "type": "registry:ui" } ] }, { "name": "plasma", "type": "registry:ui", "title": "Plasma", "description": "A mesmerizing plasma shader animation rendered with WebGL, perfect for dynamic backgrounds and previews.", "dependencies": [ "react" ], "files": [ { "path": "registry/gammaui/plasma.tsx", "type": "registry:ui" } ] }, { "name": "radial-intro", "type": "registry:ui", "title": "Radial Intro", "description": "A dynamic radial orbit animation built with Motion and React, featuring upright spinning image nodes.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/radial-intro.tsx", "type": "registry:ui" } ] }, { "name": "logo-cloud", "type": "registry:ui", "title": "Logo Cloud", "description": "A responsive logo grid component supporting dark mode, decorations, and flexible layout.", "dependencies": [ "react", "@tabler/icons-react" ], "files": [ { "path": "registry/gammaui/logo-cloud.tsx", "type": "registry:ui" } ] }, { "name": "wave-path", "type": "registry:ui", "title": "Wave Path", "description": "A dynamic interactive SVG wave component that responds to pointer movement.", "dependencies": [ "react" ], "files": [ { "path": "registry/gammaui/wave-path.tsx", "type": "registry:ui" } ] }, { "name": "magnetize-button", "type": "registry:ui", "title": "Magnetize Button", "description": "A magnetic particle-attraction button built with Framer Motion.", "dependencies": [ "react", "motion", "@tabler/icons-react" ], "files": [ { "path": "registry/gammaui/magnetize-button.tsx", "type": "registry:ui" } ] }, { "name": "text-roll", "type": "registry:ui", "title": "Text Roll", "description": "A rolling hover-animated text component built with Motion One.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/text-roll.tsx", "type": "registry:ui" } ] }, { "name": "activity-dropdown", "type": "registry:ui", "title": "Activity Dropdown", "description": "A modern activity/notification dropdown with smooth animations and responsive motion.", "dependencies": [ "react", "@tabler/icons-react" ], "files": [ { "path": "registry/gammaui/activity-dropdown.tsx", "type": "registry:ui" } ] }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "A flexible and customizable Badge component for labels, statuses, and indicators.", "dependencies": [ "react", "@radix-ui/react-slot", "class-variance-authority" ], "files": [ { "path": "registry/gammaui/badge.tsx", "type": "registry:ui" } ] }, { "name": "animated-list", "type": "registry:ui", "title": "Animated List", "description": "A dynamic list component with smooth animations that forms a column and scrolls through items continuously.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/animated-list.tsx", "type": "registry:ui" } ] }, { "name": "logo-timeline", "type": "registry:ui", "title": "Logo Timeline", "description": "A multi-row infinitely scrolling logo timeline built with Motion One, supporting hover-activated animations and row grouping.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/logo-timeline.tsx", "type": "registry:ui" } ] }, { "name": "logo-loop", "type": "registry:ui", "title": "Logo Timeline", "description": "A looping logo marquee component with horizontal and vertical motion, hover effects, fading edges, and responsive behavior.", "dependencies": [ "react" ], "files": [ { "path": "registry/gammaui/logo-loop.tsx", "type": "registry:ui" } ] }, { "name": "pricing-interaction", "type": "registry:ui", "title": "Pricing Interaction", "description": "An interactive pricing switcher with animated numbers, selectable plans, and monthly/yearly billing modes.", "dependencies": [ "react", "@number-flow/react" ], "files": [ { "path": "registry/gammaui/pricing-interaction.tsx", "type": "registry:ui" } ] }, { "name": "cloud-flow", "type": "registry:ui", "title": "Cloud Flow", "description": "An interactive cloud architecture visualization component featuring animated SVG flow paths, glowing data particles, node badges, and a central hub with layered motion effects—ideal for showcasing distributed systems, API traffic, and real-time infrastructure flows.", "dependencies": [ "react", "@tabler/icons-react", "motion" ], "files": [ { "path": "registry/gammaui/cloud-flow.tsx", "type": "registry:ui" } ] }, { "name": "macbook-keyboard", "type": "registry:ui", "title": "Macbook Keyboard", "description": "Interactive animated MacBook keyboard component.", "dependencies": [ "react", "@tabler/icons-react", "motion" ], "files": [ { "path": "registry/gammaui/macbook-keyboard.tsx", "type": "registry:ui" } ] }, { "name": "cpu-architecture", "type": "registry:ui", "title": "CPU Architecture", "description": "A fully animated CPU architecture SVG component with dynamic paths, gradients, and optional CPU connections.", "dependencies": [ "react" ], "files": [ { "path": "registry/gammaui/cpu-architecture.tsx", "type": "registry:ui" } ] }, { "name": "shadcn-ui", "type": "registry:ui", "title": "Shadcn UI", "description": "Animated ShadCN UI SVG with glowing masked paths, motion shapes, and dynamic shimmering text with customizable props.", "dependencies": [ "react", "next-themes", "motion" ], "files": [ { "path": "registry/gammaui/shadcn-ui.tsx", "type": "registry:ui" } ] }, { "name": "location-map", "type": "registry:ui", "title": "Location Map", "description": "An interactive 3D-tilting location card with expandable animated map, live indicator, and motion-based hover effects.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/location-map.tsx", "type": "registry:ui" } ] }, { "name": "3d-folder", "type": "registry:ui", "title": "3D Folder", "description": "A 3D animated folder component that reveals project cards on hover and expands into a smooth image lightbox with keyboard navigation.", "dependencies": [ "react", "@tabler/icons-react" ], "files": [ { "path": "registry/gammaui/3d-folder.tsx", "type": "registry:ui" } ] }, { "name": "usage-card", "type": "registry:ui", "title": "Usage Card", "description": "An animated system monitor card that displays a title, percentage, and neon-lit pill indicators driven by Motion.", "dependencies": [ "react", "motion" ], "files": [ { "path": "registry/gammaui/usage-card.tsx", "type": "registry:ui" } ] }, { "name": "voxel-wall", "type": "registry:ui", "title": "Voxel Wall", "description": "A dark voxel tunnel with volumetric light rays, drifting cubes, and mouse-driven camera parallax.", "dependencies": [ "react", "three", "@react-three/fiber", "@react-three/postprocessing", "postprocessing" ], "devDependencies": [ "@types/three" ], "files": [ { "path": "registry/gammaui/voxel-wall/scene.tsx", "type": "registry:ui" }, { "path": "registry/gammaui/voxel-wall/wall.tsx", "type": "registry:ui" }, { "path": "registry/gammaui/voxel-wall/light-rays.tsx", "type": "registry:ui" }, { "path": "registry/gammaui/voxel-wall/camera-rig.tsx", "type": "registry:ui" } ] }, { "name": "data-feeding-in-demo", "type": "registry:example", "title": "Data Feeding In Demo", "description": "An animated data ingestion visualization with flowing SVG paths, pulsing gradient beams, and a staggered table reveal using Framer Motion.", "registryDependencies": [ "@gammaui/data-feeding-in" ], "files": [ { "path": "registry/example/data-feeding-in-demo.tsx", "type": "registry:example" } ] }, { "name": "aurora-glass-demo", "type": "registry:example", "title": "Aurora Glass Demo", "description": "A shimmering glass tile background with ripple layers, bevel shading, and chromatic spread.", "registryDependencies": [ "@gammaui/aurora-glass" ], "files": [ { "path": "registry/example/aurora-glass-demo.tsx", "type": "registry:example" } ] }, { "name": "live-waveform-demo", "type": "registry:example", "title": "Live Waveform Demo", "description": "A customizable live audio waveform visualizer using the Web Audio API.", "registryDependencies": [ "@gammaui/live-waveform" ], "files": [ { "path": "registry/example/live-waveform-demo.tsx", "type": "registry:example" } ] }, { "name": "support-box-demo", "type": "registry:example", "title": "Support Box Demo", "description": "An expandable and animated support widget with quick help actions using Framer Motion.", "registryDependencies": [ "@gammaui/support-box" ], "files": [ { "path": "registry/example/support-box-demo.tsx", "type": "registry:example" } ] }, { "name": "overlay-button-demo", "type": "registry:example", "title": "Overlay Button Demo", "description": "A looping animated gradient button using Framer Motion’s spring transitions for smooth motion effects.", "registryDependencies": [ "@gammaui/overlay-button" ], "files": [ { "path": "registry/example/overlay-button-demo.tsx", "type": "registry:example" } ] }, { "name": "border-button-demo", "type": "registry:example", "title": "Border Button Demo", "description": "An interactive button that animates its border dynamically based on cursor position using Framer Motion.", "registryDependencies": [ "@gammaui/border-button" ], "files": [ { "path": "registry/example/border-button-demo.tsx", "type": "registry:example" } ] }, { "name": "wavy-text-block-demo", "type": "registry:example", "title": "Wavy Text Block Demo", "description": "An example demonstrating the Wavy Block scroll-triggered animation with multiple text lines.", "registryDependencies": [ "@gammaui/wavy-text-block" ], "files": [ { "path": "registry/example/wavy-text-block-demo.tsx", "type": "registry:example" } ] }, { "name": "inverted-cursor-demo", "type": "registry:example", "title": "Inverted Cursor Demo", "description": "A smooth, animated custom cursor component with blend mode effects.", "registryDependencies": [ "@gammaui/inverted-cursor" ], "files": [ { "path": "registry/example/inverted-cursor-demo.tsx", "type": "registry:example" } ] }, { "name": "pixel-button-demo", "type": "registry:example", "title": "Pixel Button Demo", "description": "A pixelated button animation effect built with Tailwind CSS and React.", "registryDependencies": [ "@gammaui/pixel-button" ], "files": [ { "path": "registry/example/pixel-button-demo.tsx", "type": "registry:example" } ] }, { "name": "plasma-demo", "type": "registry:example", "title": "Plasma Demo", "description": "A mesmerizing plasma shader animation rendered with WebGL, perfect for dynamic backgrounds and previews.", "registryDependencies": [ "@gammaui/plasma" ], "files": [ { "path": "registry/example/plasma-demo.tsx", "type": "registry:example" } ] }, { "name": "radial-intro-demo", "type": "registry:example", "title": "Radial Intro Demo", "description": "A rotating radial orbit animation demo showcasing spinning profile images.", "registryDependencies": [ "radial-intro" ], "files": [ { "path": "registry/example/radial-intro-demo.tsx", "type": "registry:example" } ] }, { "name": "logo-cloud-demo", "type": "registry:example", "title": "Logo Cloud Demo", "description": "A responsive logo grid demo showcasing brand logos with optional plus icons.", "registryDependencies": [ "logo-cloud" ], "files": [ { "path": "registry/example/logo-cloud-demo.tsx", "type": "registry:example" } ] }, { "name": "wave-path-demo", "type": "registry:example", "title": "Wave Path Demo", "description": "An interactive SVG wave animation that reacts to cursor movement.", "registryDependencies": [ "@gammaui/wave-path" ], "files": [ { "path": "registry/example/wave-path-demo.tsx", "type": "registry:example" } ] }, { "name": "magnetize-button-demo", "type": "registry:example", "title": "Magnetize Button Demo", "description": "An interactive demo showcasing the Magnetize Button component with particle attraction effects.", "registryDependencies": [ "@gammaui/magnetize-button" ], "files": [ { "path": "registry/example/magnetize-button-demo.tsx", "type": "registry:example" } ] }, { "name": "text-roll-demo", "type": "registry:example", "title": "Text Roll Demo", "description": "An interactive demo showcasing the TextRoll hover animation component.", "registryDependencies": [ "@gammaui/text-roll" ], "files": [ { "path": "registry/example/text-roll-demo.tsx", "type": "registry:example" } ] }, { "name": "activity-dropdown-demo", "type": "registry:example", "title": "Activity Dropdown Demo", "description": "A demo showcasing the animated ActivityDropdown component with staggered item reveal.", "registryDependencies": [ "@gammaui/activity-dropdown" ], "files": [ { "path": "registry/example/activity-dropdown-demo.tsx", "type": "registry:example" } ] }, { "name": "badge-demo", "type": "registry:example", "title": "Badge Demo", "description": "A demo showcasing the GammaUI Badge component with customizable colors, sizes, and variants.", "registryDependencies": [ "@gammaui/badge" ], "files": [ { "path": "registry/example/badge-demo.tsx", "type": "registry:example" } ] }, { "name": "animated-list-demo", "type": "registry:example", "title": "Animated List Demo", "description": "A demo showcasing the Animated List component with smooth formation and scrolling animations.", "registryDependencies": [ "@gammaui/animated-list" ], "files": [ { "path": "registry/example/animated-list-demo.tsx", "type": "registry:example" } ] }, { "name": "logo-timeline-demo", "type": "registry:example", "title": "Logo Timeline Demo", "description": "A demo showcasing the animated multi-row Logo Timeline component with infinite scrolling and staggered item motion.", "registryDependencies": [ "@gammaui/logo-timeline" ], "files": [ { "path": "registry/example/logo-timeline-demo.tsx", "type": "registry:example" } ] }, { "name": "logo-timeline-demo-2", "type": "registry:example", "title": "Logo Timeline Demo 2", "description": "A demo showcasing the animated multi-row Logo Timeline component with infinite scrolling and staggered item motion.", "registryDependencies": [ "@gammaui/logo-timeline" ], "files": [ { "path": "registry/example/logo-timeline-demo-2.tsx", "type": "registry:example" } ] }, { "name": "logo-loop-demo", "type": "registry:example", "title": "Logo Timeline Demo 2", "description": "A looping logo marquee component with horizontal and vertical motion, hover effects, fading edges, and responsive behavior.", "registryDependencies": [ "@gammaui/logo-loop" ], "files": [ { "path": "registry/example/logo-loop-demo.tsx", "type": "registry:example" } ] }, { "name": "pricing-interaction-demo", "type": "registry:example", "title": "Pricing Interaction Demo", "description": "An interactive pricing switcher with animated numbers, selectable plans, and monthly/yearly billing modes.", "registryDependencies": [ "@gammaui/pricing-interaction" ], "files": [ { "path": "registry/example/pricing-interaction-demo.tsx", "type": "registry:example" } ] }, { "name": "cloud-flow-demo", "type": "registry:example", "title": "Cloud Flow Demo", "description": "An interactive cloud architecture visualization component featuring animated SVG flow paths, glowing data particles, node badges, and a central hub with layered motion effects—ideal for showcasing distributed systems, API traffic, and real-time infrastructure flows.", "registryDependencies": [ "@gammaui/cloud-flow" ], "files": [ { "path": "registry/example/cloud-flow-demo.tsx", "type": "registry:example" } ] }, { "name": "macbook-keyboard-demo", "type": "registry:example", "title": "Macbook Keyboard Demo", "description": "Interactive animated MacBook keyboard component.", "registryDependencies": [ "@gammaui/macbook-keyboard" ], "files": [ { "path": "registry/example/macbook-keyboard-demo.tsx", "type": "registry:example" } ] }, { "name": "cpu-architecture-demo", "type": "registry:example", "title": "CPU Architecture Demo", "description": "A fully animated CPU architecture SVG component with dynamic paths, gradients, and optional CPU connections.", "registryDependencies": [ "@gammaui/macbook-keyboard" ], "files": [ { "path": "registry/example/cpu-architecture-demo.tsx", "type": "registry:example" } ] }, { "name": "shadcn-ui-demo", "type": "registry:example", "title": "Shadcn UI Demo", "description": "Animated ShadCN UI SVG with glowing masked paths, motion shapes, and dynamic shimmering text with customizable props.", "registryDependencies": [ "@gammaui/shadcn-ui" ], "files": [ { "path": "registry/example/shadcn-ui-demo.tsx", "type": "registry:example" } ] }, { "name": "location-map-demo", "type": "registry:example", "title": "Location Map Demo", "description": "An interactive 3D-tilting location card with expandable animated map, live indicator, and motion-based hover effects.", "registryDependencies": [ "@gammaui/location-map" ], "files": [ { "path": "registry/example/location-map-demo.tsx", "type": "registry:example" } ] }, { "name": "3d-folder-demo", "type": "registry:example", "title": "3D Folder Demo", "description": "A 3D animated folder component that reveals project cards on hover and expands into a smooth image lightbox with keyboard navigation.", "registryDependencies": [ "@gammaui/3d-folder" ], "files": [ { "path": "registry/example/3d-folder-demo.tsx", "type": "registry:example" } ] }, { "name": "usage-card-demo", "type": "registry:example", "title": "Usage Card Demo", "description": "An animated system monitor card that displays a title, percentage, and neon-lit pill indicators driven by Motion.", "registryDependencies": [ "@gammaui/usage-card" ], "files": [ { "path": "registry/example/usage-card-demo.tsx", "type": "registry:example" } ] }, { "name": "voxel-wall-demo", "type": "registry:example", "title": "Voxel Wall Demo", "description": "A dark voxel tunnel with volumetric light rays, drifting cubes, and subtle camera parallax — ideal for hero backgrounds.", "registryDependencies": [ "@gammaui/voxel-wall" ], "files": [ { "path": "registry/example/voxel-wall-demo.tsx", "type": "registry:example" } ] }, { "name": "utils", "type": "registry:lib", "dependencies": [ "clsx", "tailwind-merge" ], "files": [ { "path": "registry/lib/utils.ts", "type": "registry:lib" } ] } ] }