{"meta":{"name":"Aceternity UI","description":"Beautiful Tailwind CSS and Framer Motion Components for React and Next.js","website":"https://ui.aceternity.com","documentation":"https://ui.aceternity.com/components","github":"https://github.com/aceternity/ui","lastUpdated":"2026-10-21T23:17:31.425Z","techStack":["React 18+","Next.js 13+ (App Router)","Tailwind CSS v4","Framer Motion","TypeScript"],"installMethod":"shadcn CLI: npx shadcn@latest add @aceternity/[component]"},"stats":{"totalComponents":114,"totalBlocks":9,"totalHooks":1,"totalExamples":184},"categories":{"backgrounds":["background-beams","background-beams-with-collision","background-boxes","background-gradient","background-gradient-animation","background-lines","background-ripple-effect","aurora-background","wavy-background","dotted-glow-background","noise-background","scales"],"text":["text-generate-effect","text-reveal-card","text-hover-effect","typewriter-effect","flip-words","colourful-text","encrypted-text","cover"],"cards":["3d-card","card-hover-effect","card-spotlight","card-stack","evervault-card","glare-card","wobble-card","comet-card","tooltip-card","focus-cards","draggable-card"],"navigation":["floating-navbar","navbar-menu","sidebar","floating-dock","resizable-navbar","tabs"],"hero":["hero-parallax","hero-highlight","spotlight","spotlight-new","lamp","vortex","container-scroll-animation"],"animations":["animated-modal","animated-testimonials","animated-tooltip","apple-cards-carousel","carousel","infinite-moving-cards","moving-border","parallax-scroll","parallax-scroll-2","tracing-beam","following-pointer","layout-text-flip","container-text-flip","3d-marquee"],"effects":["sparkles","glowing-stars","meteors","shooting-stars","stars-background","canvas-reveal-effect","svg-mask-effect","glowing-effect","pointer-highlight","lens","compare","direction-aware-hover","hover-border-gradient","pixelated-canvas","dither-shader","webcam-pixel-grid"],"layout":["bento-grid","layout-grid","sticky-scroll-reveal","timeline","grid","moving-line"],"forms":["input","label","file-upload","placeholders-and-vanish-input","gooey-input"],"utilities":["3d-pin","macbook-scroll","globe","world-map","link-preview","multi-step-loader","loader","stateful-button","code-block","sticky-banner","images-slider","google-gemini-effect","tailwindcss-buttons"]},"components":[{"name":"grid","title":"Grid","description":"grid component for React/Next.js","categories":[],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/grid.tsx"],"installCommand":"npx shadcn@latest add @aceternity/grid","documentationUrl":"https://ui.aceternity.com/components/grid","image":null,"video":null},{"name":"moving-line","title":"Moving Line","description":"moving-line component for React/Next.js","categories":[],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/moving-line.tsx"],"installCommand":"npx shadcn@latest add @aceternity/moving-line","documentationUrl":"https://ui.aceternity.com/components/moving-line","image":null,"video":null},{"name":"sparkles","title":"Sparkles","description":"A configurable sparkles component that can be used as a background or as a standalone component.","categories":["section","special","call to action","hero"],"dependencies":["@tsparticles/react","@tsparticles/engine","@tsparticles/slim","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/sparkles.tsx"],"installCommand":"npx shadcn@latest add @aceternity/sparkles","documentationUrl":"https://ui.aceternity.com/components/sparkles","image":"https://assets.aceternity.com/cloudinary_bkp/stars_sxle3d.webp","video":"https://assets.aceternity.com/cloudinary_bkp/stars_uslgqe.mp4"},{"name":"spotlight","title":"Spotlight","description":"A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.","categories":["hero","footer","section","special"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/spotlight.tsx"],"installCommand":"npx shadcn@latest add @aceternity/spotlight","documentationUrl":"https://ui.aceternity.com/components/spotlight","image":"https://assets.aceternity.com/cloudinary_bkp/Spotlight_ar5jpr.webp","video":"https://assets.aceternity.com/cloudinary_bkp/spotlight_wj7zis.mp4"},{"name":"glowing-stars","title":"Glowing Stars","description":"glowing-stars component for React/Next.js","categories":[],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/glowing-stars.tsx"],"installCommand":"npx shadcn@latest add @aceternity/glowing-stars","documentationUrl":"https://ui.aceternity.com/components/glowing-stars","image":null,"video":null},{"name":"text-reveal-card","title":"Text Reveal Card","description":"Mousemove effect to reveal text content at the bottom of the card.","categories":["text","content","hero","section","special","card"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/text-reveal-card.tsx"],"installCommand":"npx shadcn@latest add @aceternity/text-reveal-card","documentationUrl":"https://ui.aceternity.com/components/text-reveal-card","image":"https://assets.aceternity.com/cloudinary_bkp/Diagram_Card_tp3vaw.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-27_at_1.15.57_PM_ke2ubz.mov"},{"name":"animated-tooltip","title":"Animated Tooltip","description":"A cool tooltip that reveals on hover, follows mouse pointer","categories":["card","hover","special","utility"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/animated-tooltip.tsx"],"installCommand":"npx shadcn@latest add @aceternity/animated-tooltip","documentationUrl":"https://ui.aceternity.com/components/animated-tooltip","image":"https://assets.aceternity.com/cloudinary_bkp/Tooltip_luwy44.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-22_at_8.47.40_PM_oncrfe.mov"},{"name":"following-pointer","title":"Following Pointer","description":"A custom pointer that follows mouse arrow and animates in pointer and content.","categories":["feature","utility","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/following-pointer.tsx"],"installCommand":"npx shadcn@latest add @aceternity/following-pointer","documentationUrl":"https://ui.aceternity.com/components/following-pointer","image":"https://assets.aceternity.com/cloudinary_bkp/Following_Pointer_ix95ne.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-22_at_8.49.59_PM_xj0ynv.mov"},{"name":"background-beams","title":"Background Beams","description":"Multiple background beams that follow a path of SVG, makes a good hero section background.","categories":["card","background","gradient","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/background-beams.tsx"],"installCommand":"npx shadcn@latest add @aceternity/background-beams","documentationUrl":"https://ui.aceternity.com/components/background-beams","image":"https://assets.aceternity.com/cloudinary_bkp/Background_Beams_ilbyga.webp","video":"https://assets.aceternity.com/cloudinary_bkp/temp_y20hmj.mov"},{"name":"svg-mask-effect","title":"SVG Mask Effect","description":"A mask reveal effect, hover the cursor over a container to reveal what's underneath.","categories":["card","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/svg-mask-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/svg-mask-effect","documentationUrl":"https://ui.aceternity.com/components/svg-mask-effect","image":"https://assets.aceternity.com/cloudinary_bkp/SVG_Mask_Effect_idbmqx.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-22_at_1.16.33_PM_compressed_tsbsfg.mp4"},{"name":"infinite-moving-cards","title":"Infinite Moving Cards","description":"A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.","categories":["testimonials","utility","marquee"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/infinite-moving-cards.tsx"],"installCommand":"npx shadcn@latest add @aceternity/infinite-moving-cards","documentationUrl":"https://ui.aceternity.com/components/infinite-moving-cards","image":"https://assets.aceternity.com/cloudinary_bkp/Infinite_Moving_Cards_evhzur.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-22_at_8.31.17_PM_compressed_fiojxa.mp4"},{"name":"3d-pin","title":"3D Animated Pin","description":"A gradient pin that animates on hover, perfect for product links.","categories":["card","hover","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/3d-pin.tsx"],"installCommand":"npx shadcn@latest add @aceternity/3d-pin","documentationUrl":"https://ui.aceternity.com/components/3d-pin","image":"https://assets.aceternity.com/cloudinary_bkp/3d_pin_sklefs.webp","video":"https://assets.aceternity.com/cloudinary_bkp/3dpin_g8kfkx.mp4"},{"name":"evervault-card","title":"Evervault Card","description":"A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.","categories":["card","features","hover","product"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/evervault-card.tsx"],"installCommand":"npx shadcn@latest add @aceternity/evervault-card","documentationUrl":"https://ui.aceternity.com/components/evervault-card","image":"https://assets.aceternity.com/cloudinary_bkp/Evervault_Card_a1qko9.webp","video":null},{"name":"parallax-scroll","title":"Parallax Grid Scroll","description":"A grid where two columns scroll in oposite directions, giving a parallax effect.","categories":["section","parallax","card","grid"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/parallax-scroll.tsx"],"installCommand":"npx shadcn@latest add @aceternity/parallax-scroll","documentationUrl":"https://ui.aceternity.com/components/parallax-scroll","image":"https://assets.aceternity.com/cloudinary_bkp/Parallax_Scroll_pzlatw_anfkh7.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-22_at_8.54.23_PM_neqs1y.mov"},{"name":"parallax-scroll-2","title":"Parallax Scroll 2","description":"parallax-scroll-2 component for React/Next.js","categories":[],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/parallax-scroll-2.tsx"],"installCommand":"npx shadcn@latest add @aceternity/parallax-scroll-2","documentationUrl":"https://ui.aceternity.com/components/parallax-scroll-2","image":null,"video":null},{"name":"parallax-hero-images","title":"Parallax Hero Images","description":"Mouse-driven parallax effect, perfect for hero sections. Images blur fade in and move at different depths.","categories":["hero","parallax","images","section"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/parallax-hero-images.tsx"],"installCommand":"npx shadcn@latest add @aceternity/parallax-hero-images","documentationUrl":"https://ui.aceternity.com/components/parallax-hero-images","image":"https://assets.aceternity.com/components/parallax-hero-images-2.webp","video":null},{"name":"tracing-beam","title":"Tracing Beam","description":"A Beam that follows the path of an SVG as the user scrolls. Adjusts beam length with scroll speed.","categories":["content","scroll","utility"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/tracing-beam.tsx"],"installCommand":"npx shadcn@latest add @aceternity/tracing-beam","documentationUrl":"https://ui.aceternity.com/components/tracing-beam","image":"https://assets.aceternity.com/cloudinary_bkp/Tracing_Beam_npujte.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-22_at_8.45.07_PM_cunzk7.mov"},{"name":"container-scroll-animation","title":"Container Scroll Animation","description":"A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.","categories":["hero","product","features"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/container-scroll-animation.tsx"],"installCommand":"npx shadcn@latest add @aceternity/container-scroll-animation","documentationUrl":"https://ui.aceternity.com/components/container-scroll-animation","image":"https://assets.aceternity.com/cloudinary_bkp/Hero_Scroll_xzhqrj.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-23_at_12.23.52_PM_gyepbf.mov"},{"name":"text-generate-effect","title":"Text Generate Effect","description":"A cool text effect that fades in text on page load, one by one.","categories":["text","content","hero","section","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/text-generate-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/text-generate-effect","documentationUrl":"https://ui.aceternity.com/components/text-generate-effect","image":"https://assets.aceternity.com/cloudinary_bkp/Text_Generate_Effect_p1p0mm.webp","video":null},{"name":"meteors","title":"Meteor Effect","description":"A group of beams in the background of a container, sort of like meteors.","categories":["card","testimonial","special"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/meteors.tsx"],"installCommand":"npx shadcn@latest add @aceternity/meteors","documentationUrl":"https://ui.aceternity.com/components/meteors","image":"https://assets.aceternity.com/cloudinary_bkp/Meteors_fye3ys.webp","video":null},{"name":"card-stack","title":"Card Stack","description":"Cards stack on top of each other after some interval. Perfect for showing testimonials.","categories":["card","testimonials","gradient","features"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/card-stack.tsx"],"installCommand":"npx shadcn@latest add @aceternity/card-stack","documentationUrl":"https://ui.aceternity.com/components/card-stack","image":"https://assets.aceternity.com/cloudinary_bkp/Card_Stack_bdxdhf.webp","video":null},{"name":"moving-border","title":"Moving Border","description":"A border that moves around the container. Perfect for making your buttons stand out.","categories":["button","special","card","utility"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/moving-border.tsx"],"installCommand":"npx shadcn@latest add @aceternity/moving-border","documentationUrl":"https://ui.aceternity.com/components/moving-border","image":"https://assets.aceternity.com/cloudinary_bkp/Moving_Border_yn78lv.webp","video":null},{"name":"lamp","title":"Lamp","description":"lamp component for React/Next.js","categories":[],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/lamp.tsx"],"installCommand":"npx shadcn@latest add @aceternity/lamp","documentationUrl":"https://ui.aceternity.com/components/lamp","image":null,"video":null},{"name":"sticky-scroll-reveal","title":"Sticky Scroll Reveal","description":"A sticky container that sticks while scrolling, text reveals on scroll","categories":["special","parallax","section"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/sticky-scroll-reveal.tsx"],"installCommand":"npx shadcn@latest add @aceternity/sticky-scroll-reveal","documentationUrl":"https://ui.aceternity.com/components/sticky-scroll-reveal","image":"https://assets.aceternity.com/cloudinary_bkp/Sticky_Scroll_Reveal_j7mzxl.webp","video":null},{"name":"floating-navbar","title":"Floating Navbar","description":"A sticky Navbar that hides on scroll, reveals when scrolled up.","categories":["navbar","utility"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/floating-navbar.tsx"],"installCommand":"npx shadcn@latest add @aceternity/floating-navbar","documentationUrl":"https://ui.aceternity.com/components/floating-navbar","image":"https://assets.aceternity.com/cloudinary_bkp/floating-nav-final.webp","video":"https://assets.aceternity.com/cloudinary_bkp/floating-nav.mp4"},{"name":"navbar-menu","title":"Navbar Menu","description":"A navbar menu that animates its children on hover, makes a beautiful bignav","categories":["navbar","utility"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/navbar-menu.tsx"],"installCommand":"npx shadcn@latest add @aceternity/navbar-menu","documentationUrl":"https://ui.aceternity.com/components/navbar-menu","image":"https://assets.aceternity.com/cloudinary_bkp/Navbar_Menu_ildcda.webp","video":"https://assets.aceternity.com/cloudinary_bkp/Screen_Recording_2023-11-22_at_8.34.40_PM_mhlmml.mov"},{"name":"tailwindcss-buttons","title":"Tailwind CSS buttons","description":"A curated list of awesome, battle tested Tailwind CSS buttons components","categories":["button","utility"],"dependencies":["@tabler/icons-react"],"devDependencies":[],"registryDependencies":[],"files":["ui/tailwindcss-buttons.tsx"],"installCommand":"npx shadcn@latest add @aceternity/tailwindcss-buttons","documentationUrl":"https://ui.aceternity.com/components/tailwindcss-buttons","image":"https://assets.aceternity.com/cloudinary_bkp/tailwindcss-buttons.webp","video":null},{"name":"bento-grid","title":"Bento Grid","description":"A skewed grid layout with Title, description and a header component","categories":["card","grid","hover","features"],"dependencies":["@tabler/icons-react"],"devDependencies":[],"registryDependencies":[],"files":["ui/bento-grid.tsx"],"installCommand":"npx shadcn@latest add @aceternity/bento-grid","documentationUrl":"https://ui.aceternity.com/components/bento-grid","image":"https://assets.aceternity.com/cloudinary_bkp/bento-2.webp","video":"https://assets.aceternity.com/cloudinary_bkp/bento-video.mp4"},{"name":"card-hover-effect","title":"Hover Effect","description":"Hover over the cards and the effect slides to the currently hovered card.","categories":["card","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/card-hover-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/card-hover-effect","documentationUrl":"https://ui.aceternity.com/components/card-hover-effect","image":"https://assets.aceternity.com/cloudinary_bkp/Hover_Effect_vie10l.webp","video":null},{"name":"google-gemini-effect","title":"Google Gemini Effect","description":"An effect of SVGs as seen on the Google Gemini Website","categories":["footer","section","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/google-gemini-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/google-gemini-effect","documentationUrl":"https://ui.aceternity.com/components/google-gemini-effect","image":"https://assets.aceternity.com/cloudinary_bkp/google-gemini.webp","video":"https://assets.aceternity.com/cloudinary_bkp/google-gemini.mp4"},{"name":"gooey-input","title":"Gooey Input","description":"A search-style input that expands with a gooey SVG filter and shared layout animation","categories":["utility","form","navigation","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/gooey-input.tsx"],"installCommand":"npx shadcn@latest add @aceternity/gooey-input","documentationUrl":"https://ui.aceternity.com/components/gooey-input","image":"https://assets.aceternity.com/components/gooey-input.webp","video":null},{"name":"typewriter-effect","title":"Typewriter Effect","description":"Text generates as if it is being typed on the screen.","categories":["text","content","hero","section","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/typewriter-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/typewriter-effect","documentationUrl":"https://ui.aceternity.com/components/typewriter-effect","image":"https://assets.aceternity.com/cloudinary_bkp/typewriter-effect.webp","video":"https://assets.aceternity.com/cloudinary_bkp/typewriter-effect.mp4"},{"name":"background-boxes","title":"Background Boxes","description":"A full width background box container that highlights on hover","categories":["card","background","gradient","special","call to action"],"dependencies":["mini-svg-data-uri","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/background-boxes.tsx"],"installCommand":"npx shadcn@latest add @aceternity/background-boxes","documentationUrl":"https://ui.aceternity.com/components/background-boxes","image":"https://assets.aceternity.com/cloudinary_bkp/Background_Boxes_indgdr.webp","video":null},{"name":"3d-card","title":"3d Card","description":"3d-card component for React/Next.js","categories":[],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/3d-card.tsx"],"installCommand":"npx shadcn@latest add @aceternity/3d-card","documentationUrl":"https://ui.aceternity.com/components/3d-card","image":null,"video":null},{"name":"images-slider","title":"Images Slider","description":"A full page slider with images that can be navigated with the keyboard.","categories":["features","product","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/images-slider.tsx"],"installCommand":"npx shadcn@latest add @aceternity/images-slider","documentationUrl":"https://ui.aceternity.com/components/images-slider","image":"https://assets.aceternity.com/cloudinary_bkp/images-slider.webp","video":null},{"name":"direction-aware-hover","title":"Direction Aware Hover","description":"A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.","categories":["card","features","hover","product"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/direction-aware-hover.tsx"],"installCommand":"npx shadcn@latest add @aceternity/direction-aware-hover","documentationUrl":"https://ui.aceternity.com/components/direction-aware-hover","image":"https://assets.aceternity.com/cloudinary_bkp/direction-aware-hover.webp","video":null},{"name":"tabs","title":"Animated Tabs","description":"Tabs to switch content, click on a tab to check background animation.","categories":["hero","features","product","utility"],"dependencies":["@radix-ui/react-tabs"],"devDependencies":[],"registryDependencies":[],"files":["ui/tabs.tsx"],"installCommand":"npx shadcn@latest add @aceternity/tabs","documentationUrl":"https://ui.aceternity.com/components/tabs","image":"https://assets.aceternity.com/tabs.webp","video":"https://assets.aceternity.com/tabs.mp4"},{"name":"hero-parallax","title":"Hero Parallax","description":"A scroll effect with rotation, translation and opacity animations.","categories":["hero","section","special","parallax"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/hero-parallax.tsx"],"installCommand":"npx shadcn@latest add @aceternity/hero-parallax","documentationUrl":"https://ui.aceternity.com/components/hero-parallax","image":"https://assets.aceternity.com/hero-parallax.webp","video":null},{"name":"wavy-background","title":"Wavy Background","description":"A cool background effect with waves that move.","categories":["background","special"],"dependencies":["simplex-noise"],"devDependencies":[],"registryDependencies":[],"files":["ui/wavy-background.tsx"],"installCommand":"npx shadcn@latest add @aceternity/wavy-background","documentationUrl":"https://ui.aceternity.com/components/wavy-background","image":"https://assets.aceternity.com/wavy-background.webp","video":"https://assets.aceternity.com/wavy-background.mp4"},{"name":"background-gradient","title":"Background Gradient","description":"An animated gradient that sits at the background of a card, button or anything.","categories":["card","background","gradient","special","call to action"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/background-gradient.tsx"],"installCommand":"npx shadcn@latest add @aceternity/background-gradient","documentationUrl":"https://ui.aceternity.com/components/background-gradient","image":"https://assets.aceternity.com/gradient.webp","video":"https://assets.aceternity.com/gradient.mp4"},{"name":"layout-grid","title":"Layout Grid","description":"A layout effect that animates the grid item on click, powered by framer motion layout","categories":["section","features","special","product"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/layout-grid.tsx"],"installCommand":"npx shadcn@latest add @aceternity/layout-grid","documentationUrl":"https://ui.aceternity.com/components/layout-grid","image":"https://assets.aceternity.com/layout-grid.webp","video":"https://assets.aceternity.com/layout-grid.mp4"},{"name":"background-gradient-animation","title":"Background Gradient Animation","description":"A smooth and elegant background gradient animation that changes the gradient position over time.","categories":["card","background","gradient","special","call to action"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/background-gradient-animation.tsx"],"installCommand":"npx shadcn@latest add @aceternity/background-gradient-animation","documentationUrl":"https://ui.aceternity.com/components/background-gradient-animation","image":"https://assets.aceternity.com/background-gradient-animation.webp","video":"https://assets.aceternity.com/background-gradient-animation.mp4"},{"name":"macbook-scroll","title":"Fey.com Macbook Scroll","description":"Scroll through the page and see the image come out of the screen, as seen on Fey.com website.","categories":["hero","footer","section","special","parallax"],"dependencies":["@tabler/icons-react","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/macbook-scroll.tsx"],"installCommand":"npx shadcn@latest add @aceternity/macbook-scroll","documentationUrl":"https://ui.aceternity.com/components/macbook-scroll","image":"https://assets.aceternity.com/macbook-scroll.webp","video":null},{"name":"input","title":"Input","description":"input component for React/Next.js","categories":[],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/input.tsx"],"installCommand":"npx shadcn@latest add @aceternity/input","documentationUrl":"https://ui.aceternity.com/components/input","image":null,"video":null},{"name":"label","title":"Label","description":"label component for React/Next.js","categories":[],"dependencies":["@radix-ui/react-label"],"devDependencies":[],"registryDependencies":[],"files":["ui/label.tsx"],"installCommand":"npx shadcn@latest add @aceternity/label","documentationUrl":"https://ui.aceternity.com/components/label","image":null,"video":null},{"name":"multi-step-loader","title":"Multi Step Loader","description":"A step loader for screens that take a lot of time to load.","categories":["loader","special","utility"],"dependencies":["@tabler/icons-react","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/multi-step-loader.tsx"],"installCommand":"npx shadcn@latest add @aceternity/multi-step-loader","documentationUrl":"https://ui.aceternity.com/components/multi-step-loader","image":"https://assets.aceternity.com/multi-step-loader.webp","video":null},{"name":"globe","title":"Globe","description":"globe component for React/Next.js","categories":[],"dependencies":["three","three-globe","@react-three/fiber@alpha","@react-three/drei"],"devDependencies":["@types/three"],"registryDependencies":[],"files":["ui/globe.tsx"],"installCommand":"npx shadcn@latest add @aceternity/globe","documentationUrl":"https://ui.aceternity.com/components/globe","image":null,"video":null},{"name":"aurora-background","title":"Aurora Background","description":"A subtle Aurora or Southern Lights background for your website.","categories":["card","background","gradient","special"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/aurora-background.tsx"],"installCommand":"npx shadcn@latest add @aceternity/aurora-background","documentationUrl":"https://ui.aceternity.com/components/aurora-background","image":"https://assets.aceternity.com/aurora-background.webp","video":null},{"name":"canvas-reveal-effect","title":"Canvas Reveal Effect","description":"A dot background that expands on hover, as seen on Clerk's website","categories":["card","background","gradient","canvas","special","call to action"],"dependencies":["three","@react-three/fiber"],"devDependencies":["@types/three"],"registryDependencies":[],"files":["ui/canvas-reveal-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/canvas-reveal-effect","documentationUrl":"https://ui.aceternity.com/components/canvas-reveal-effect","image":"https://assets.aceternity.com/canvas-reveal-effect.webp","video":null},{"name":"hover-border-gradient","title":"Hover Border Gradient","description":"A hover effect that expands to the entire container with a gradient border.","categories":["hover","card","utility","button"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/hover-border-gradient.tsx"],"installCommand":"npx shadcn@latest add @aceternity/hover-border-gradient","documentationUrl":"https://ui.aceternity.com/components/hover-border-gradient","image":"https://assets.aceternity.com/hover-border-gradient.webp","video":null},{"name":"hero-highlight","title":"Hero Highlight","description":"A background effect with a text highlight component, perfect for hero sections.","categories":["hero","section","special","text","background"],"dependencies":["mini-svg-data-uri","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/hero-highlight.tsx"],"installCommand":"npx shadcn@latest add @aceternity/hero-highlight","documentationUrl":"https://ui.aceternity.com/components/hero-highlight","image":"https://assets.aceternity.com/hero-highlight.webp","video":null},{"name":"vortex","title":"Vortex Background","description":"A wavy, swirly, vortex background ideal for CTAs and backgrounds.","categories":["background","special","CTA"],"dependencies":["simplex-noise","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/vortex.tsx"],"installCommand":"npx shadcn@latest add @aceternity/vortex","documentationUrl":"https://ui.aceternity.com/components/vortex","image":"https://assets.aceternity.com/vortex.webp","video":null},{"name":"wobble-card","title":"Wobble Card","description":"A card effect that translates and scales on mousemove, perfect for feature cards.","categories":["background","features","card","CTA","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/wobble-card.tsx"],"installCommand":"npx shadcn@latest add @aceternity/wobble-card","documentationUrl":"https://ui.aceternity.com/components/wobble-card","image":"https://assets.aceternity.com/wobble-card.webp","video":null},{"name":"placeholders-and-vanish-input","title":"Placeholders And Vanish Input","description":"Sliding in placeholders and vanish effect of input on submit","categories":["utility","form","section","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/placeholders-and-vanish-input.tsx"],"installCommand":"npx shadcn@latest add @aceternity/placeholders-and-vanish-input","documentationUrl":"https://ui.aceternity.com/components/placeholders-and-vanish-input","image":"https://assets.aceternity.com/placeholders-and-vanish-input.webp","video":null},{"name":"flip-words","title":"Flip Words","description":"A component that flips through a list of words","categories":["text","hero","special","call to action"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/flip-words.tsx"],"installCommand":"npx shadcn@latest add @aceternity/flip-words","documentationUrl":"https://ui.aceternity.com/components/flip-words","image":"https://assets.aceternity.com/flip-text.webp","video":null},{"name":"link-preview","title":"Link Preview","description":"Dynamic link previews for your anchor tags","categories":["text","special","utilities"],"dependencies":["@radix-ui/react-hover-card","qss","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/link-preview.tsx"],"installCommand":"npx shadcn@latest add @aceternity/link-preview","documentationUrl":"https://ui.aceternity.com/components/link-preview","image":"https://assets.aceternity.com/link-preview.webp","video":null},{"name":"glare-card","title":"Glare Card","description":"A glare effect that happens on hover, as seen on Linear's website","categories":["special","utilities","card"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/glare-card.tsx"],"installCommand":"npx shadcn@latest add @aceternity/glare-card","documentationUrl":"https://ui.aceternity.com/components/glare-card","image":"https://assets.aceternity.com/glare-card.webp","video":null},{"name":"animated-modal","title":"Animated Modal","description":"A customizable, compound modal component with animated transitions","categories":["special","utilities","modal"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/animated-modal.tsx"],"installCommand":"npx shadcn@latest add @aceternity/animated-modal","documentationUrl":"https://ui.aceternity.com/components/animated-modal","image":"https://assets.aceternity.com/animated-modal.webp","video":null},{"name":"sidebar","title":"Sidebar","description":"Expandable sidebar that expands on hover, mobile responsive and dark mode support","categories":["sidebar","special","utilities","dashboard"],"dependencies":["@tabler/icons-react","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/sidebar.tsx"],"installCommand":"npx shadcn@latest add @aceternity/sidebar","documentationUrl":"https://ui.aceternity.com/components/sidebar","image":"https://assets.aceternity.com/sidebar.webp","video":null},{"name":"apple-cards-carousel","title":"Apple Cards Carousel","description":"A sleek and minimal carousel implementation, as seen on apple.com","categories":["card","features","carousel"],"dependencies":["@tabler/icons-react","motion"],"devDependencies":[],"registryDependencies":["use-outside-click"],"files":["ui/apple-cards-carousel.tsx"],"installCommand":"npx shadcn@latest add @aceternity/apple-cards-carousel","documentationUrl":"https://ui.aceternity.com/components/apple-cards-carousel","image":"https://assets.aceternity.com/apple-cards-carousel.webp","video":null},{"name":"shooting-stars","title":"Shooting Stars","description":"shooting-stars component for React/Next.js","categories":[],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/shooting-stars.tsx"],"installCommand":"npx shadcn@latest add @aceternity/shooting-stars","documentationUrl":"https://ui.aceternity.com/components/shooting-stars","image":null,"video":null},{"name":"stars-background","title":"Stars Background","description":"stars-background component for React/Next.js","categories":[],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/stars-background.tsx"],"installCommand":"npx shadcn@latest add @aceternity/stars-background","documentationUrl":"https://ui.aceternity.com/components/stars-background","image":null,"video":null},{"name":"compare","title":"Compare","description":"A comparison component between two images, slide or drag to compare","categories":["card","features","special"],"dependencies":["@tabler/icons-react","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/compare.tsx"],"installCommand":"npx shadcn@latest add @aceternity/compare","documentationUrl":"https://ui.aceternity.com/components/compare","image":"https://assets.aceternity.com/compare.webp","video":null},{"name":"card-spotlight","title":"Card Spotlight","description":"A card component with a spotlight effect revealing a radial gradient background","categories":["card","features","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":["canvas-reveal-effect"],"files":["ui/card-spotlight.tsx"],"installCommand":"npx shadcn@latest add @aceternity/card-spotlight","documentationUrl":"https://ui.aceternity.com/components/card-spotlight","image":"https://assets.aceternity.com/card-spotlight.webp","video":null},{"name":"cover","title":"Cover","description":"cover component for React/Next.js","categories":[],"dependencies":["motion"],"devDependencies":[],"registryDependencies":["sparkles"],"files":["ui/cover.tsx"],"installCommand":"npx shadcn@latest add @aceternity/cover","documentationUrl":"https://ui.aceternity.com/components/cover","image":null,"video":null},{"name":"file-upload","title":"File Upload","description":"A minimal file upload form with background grid, drag and drop, and micro interactions.","categories":["form","special"],"dependencies":["@tabler/icons-react","react-dropzone","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/file-upload.tsx"],"installCommand":"npx shadcn@latest add @aceternity/file-upload","documentationUrl":"https://ui.aceternity.com/components/file-upload","image":"https://assets.aceternity.com/file-upload.webp","video":null},{"name":"floating-dock","title":"Floating Dock","description":"A floating dock mac os style component, acts as a navigation bar.","categories":["form","special"],"dependencies":["@tabler/icons-react","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/floating-dock.tsx"],"installCommand":"npx shadcn@latest add @aceternity/floating-dock","documentationUrl":"https://ui.aceternity.com/components/floating-dock","image":"https://assets.aceternity.com/floating-dock.webp","video":null},{"name":"focus-cards","title":"Focus Cards","description":"Hover over the card to focus on it, blurring the rest of the cards.","categories":["cards","ui"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/focus-cards.tsx"],"installCommand":"npx shadcn@latest add @aceternity/focus-cards","documentationUrl":"https://ui.aceternity.com/components/focus-cards","image":"https://assets.aceternity.com/focus-cards.webp","video":null},{"name":"background-beams-with-collision","title":"Background Beams With Collision","description":"Exploding beams in the background","categories":["ui","background"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/background-beams-with-collision.tsx"],"installCommand":"npx shadcn@latest add @aceternity/background-beams-with-collision","documentationUrl":"https://ui.aceternity.com/components/background-beams-with-collision","image":"https://assets.aceternity.com/background-beams-with-collision.webp","video":null},{"name":"timeline","title":"Timeline","description":"A timeline component with sticky header and scroll beam follow.","categories":["content","special"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/timeline.tsx"],"installCommand":"npx shadcn@latest add @aceternity/timeline","documentationUrl":"https://ui.aceternity.com/components/timeline","image":"https://assets.aceternity.com/timeline.webp","video":null},{"name":"text-hover-effect","title":"Text Hover Effect","description":"A text hover effect that animates and outlines gradient on hover, as seen on x.ai","categories":["hover","special","text"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/text-hover-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/text-hover-effect","documentationUrl":"https://ui.aceternity.com/components/text-hover-effect","image":"https://assets.aceternity.com/text-hover-effect.webp","video":null},{"name":"lens","title":"Lens","description":"A lens component to zoom into images, videos, or practically anything.","categories":["content","special","effects","cards"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/lens.tsx"],"installCommand":"npx shadcn@latest add @aceternity/lens","documentationUrl":"https://ui.aceternity.com/components/lens","image":"https://assets.aceternity.com/lens.webp","video":null},{"name":"background-lines","title":"Background Lines","description":"A set of svg paths that animate in a wave pattern. Good for hero sections background, as seen on height.app","categories":["background","special","effects","hero"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/background-lines.tsx"],"installCommand":"npx shadcn@latest add @aceternity/background-lines","documentationUrl":"https://ui.aceternity.com/components/background-lines","image":"https://assets.aceternity.com/background-lines.webp","video":null},{"name":"animated-testimonials","title":"Animated Testimonials","description":"Minimal testimonials sections with image and quote.","categories":["testimonials","special"],"dependencies":["@tabler/icons-react","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/animated-testimonials.tsx"],"installCommand":"npx shadcn@latest add @aceternity/animated-testimonials","documentationUrl":"https://ui.aceternity.com/components/animated-testimonials","image":"https://assets.aceternity.com/animated-testimonials.webp","video":null},{"name":"world-map","title":"World Map","description":"A world map with animated lines and dots, programatically generated.","categories":["map","special","features"],"dependencies":["dotted-map","motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/world-map.tsx"],"installCommand":"npx shadcn@latest add @aceternity/world-map","documentationUrl":"https://ui.aceternity.com/components/world-map","image":"https://assets.aceternity.com/world-map.webp","video":null},{"name":"code-block","title":"Code Block","description":"A configurable code block component built on top of react-syntax-highlighter.","categories":["code","special","features"],"dependencies":["@tabler/icons-react","react-syntax-highlighter"],"devDependencies":["@types/react-syntax-highlighter"],"registryDependencies":[],"files":["ui/code-block.tsx"],"installCommand":"npx shadcn@latest add @aceternity/code-block","documentationUrl":"https://ui.aceternity.com/components/code-block","image":"https://assets.aceternity.com/code-block.webp","video":null},{"name":"carousel","title":"Carousel","description":"A customizable carousel with microinteractions and slider.","categories":["carousel","special","features"],"dependencies":["@tabler/icons-react"],"devDependencies":[],"registryDependencies":[],"files":["ui/carousel.tsx"],"installCommand":"npx shadcn@latest add @aceternity/carousel","documentationUrl":"https://ui.aceternity.com/components/carousel","image":"https://assets.aceternity.com/carousel.webp","video":null},{"name":"colourful-text","title":"Colourful Text","description":"A text component with various colours, filter and scale effects.","categories":["text","special","features","hero"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/colourful-text.tsx"],"installCommand":"npx shadcn@latest add @aceternity/colourful-text","documentationUrl":"https://ui.aceternity.com/components/colourful-text","image":"https://assets.aceternity.com/colourful-text.webp","video":null},{"name":"squiggly-text","title":"Squiggly Text","description":"A squiggly text effect using SVG turbulence and displacement filters, animated with Motion.","categories":["text","special","features","hero"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/squiggly-text.tsx"],"installCommand":"npx shadcn@latest add @aceternity/squiggly-text","documentationUrl":"https://ui.aceternity.com/components/squiggly-text","image":"https://assets.aceternity.com/components/squiggly-text.webp","video":null},{"name":"magnetic-button","title":"Magnetic Button","description":"A button that subtly drifts toward the cursor as you hover, with a spring-based return when you leave.","categories":["button","interaction","hover"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/magnetic-button.tsx"],"installCommand":"npx shadcn@latest add @aceternity/magnetic-button","documentationUrl":"https://ui.aceternity.com/components/magnetic-button","image":"https://assets.aceternity.com/components/magnetic-button.webp","video":null},{"name":"notch","title":"Notch","description":"A floating, configurable notch that pins to the top or bottom of the screen. Pass an array of items with links and it animates the active state as you switch between them.","categories":["navigation","navbar","floating"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/notch.tsx"],"installCommand":"npx shadcn@latest add @aceternity/notch","documentationUrl":"https://ui.aceternity.com/components/notch","image":"https://assets.aceternity.com/components/notch.webp","video":null},{"name":"spotlight-new","title":"Spotlight New","description":"A new spotlight component with left and right spotlight, configurable and customizable.","categories":["hero","footer","section","special"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/spotlight-new.tsx"],"installCommand":"npx shadcn@latest add @aceternity/spotlight-new","documentationUrl":"https://ui.aceternity.com/components/spotlight-new","image":"https://assets.aceternity.com/spotlight-new.webp","video":"https://assets.aceternity.com/cloudinary_bkp/spotlight_wj7zis.mp4"},{"name":"glowing-effect","title":"Glowing Effect","description":"A border glowing effect that adapts to any container or card, as seen on Cursor's website.","categories":["bento grid","card","border","highlight"],"dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":["ui/glowing-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/glowing-effect","documentationUrl":"https://ui.aceternity.com/components/glowing-effect","image":"https://assets.aceternity.com/glowing-effect.webp","video":null},{"name":"3d-marquee","title":"3D Marquee","description":"A 3D Marquee effect with grid, good for showcasing testimonials and hero sections","categories":["hero section","hero","backgrounds","testimonials"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/3d-marquee.tsx"],"installCommand":"npx shadcn@latest add @aceternity/3d-marquee","documentationUrl":"https://ui.aceternity.com/components/3d-marquee","image":"https://assets.aceternity.com/3d-marquee.webp","video":null},{"name":"container-text-flip","title":"Container Text Flip","description":"A container that flips through words, animating the width.","categories":["text","animation","container","hero"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/container-text-flip.tsx"],"installCommand":"npx shadcn@latest add @aceternity/container-text-flip","documentationUrl":"https://ui.aceternity.com/components/container-text-flip","image":"https://assets.aceternity.com/container-text-flip.webp","video":null},{"name":"resizable-navbar","title":"Resizable Navbar","description":"A navbar that changes width on scroll, responsive and animated.","categories":["navbar","responsive","navigation","layout"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/resizable-navbar.tsx"],"installCommand":"npx shadcn@latest add @aceternity/resizable-navbar","documentationUrl":"https://ui.aceternity.com/components/resizable-navbar","image":"https://assets.aceternity.com/resizable-navbar.webp","video":null},{"name":"draggable-card","title":"Draggable Card","description":"A tiltable, draggable card component that jumps on bounds.","categories":["card","draggable","tiltable"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/draggable-card.tsx"],"installCommand":"npx shadcn@latest add @aceternity/draggable-card","documentationUrl":"https://ui.aceternity.com/components/draggable-card","image":"https://assets.aceternity.com/draggable-card.webp","video":null},{"name":"sticky-banner","title":"Sticky Banner","description":"A banner component that sticks to top, hides when user scrolls down","categories":["banner","sticky","hero"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/sticky-banner.tsx"],"installCommand":"npx shadcn@latest add @aceternity/sticky-banner","documentationUrl":"https://ui.aceternity.com/components/sticky-banner","image":"https://assets.aceternity.com/sticky-banner.webp","video":null},{"name":"pointer-highlight","title":"Pointer Highlight","description":"A component that highlights text when it's in view, with a pointer and border.","categories":["pointer","highlight","text"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/pointer-highlight.tsx"],"installCommand":"npx shadcn@latest add @aceternity/pointer-highlight","documentationUrl":"https://ui.aceternity.com/components/pointer-highlight","image":"https://assets.aceternity.com/pointer-highlight.webp","video":null},{"name":"stateful-button","title":"Stateful Button","description":"A button that shows a loading state when clicked, and a success state when the action is completed.","categories":["button","stateful","loading"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/stateful-button.tsx"],"installCommand":"npx shadcn@latest add @aceternity/stateful-button","documentationUrl":"https://ui.aceternity.com/components/stateful-button","image":"https://assets.aceternity.com/stateful-button.webp","video":null},{"name":"loader","title":"Loaders","description":"A set of simple and minimal loaders for your loading screens and components.","categories":["loaders","loader","loading"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/loader.tsx"],"installCommand":"npx shadcn@latest add @aceternity/loader","documentationUrl":"https://ui.aceternity.com/components/loader","image":"https://assets.aceternity.com/loader.webp","video":null},{"name":"image-generation-loader","title":"Image Generation Loader","description":"A canvas loader that scans across an image with animated pixel grids, text masks, and progress overlays.","categories":["loader","canvas","image","animation"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/image-generation-loader.tsx"],"installCommand":"npx shadcn@latest add @aceternity/image-generation-loader","documentationUrl":"https://ui.aceternity.com/components/image-generation-loader","image":"https://assets.aceternity.com/components/sliding-loader.webp","video":null},{"name":"comet-card","title":"Comet Card","description":"A perspective, 3D, Tilt card as seen on Perplexity Comet's website.","categories":["card","3D","tilt"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/comet-card.tsx"],"installCommand":"npx shadcn@latest add @aceternity/comet-card","documentationUrl":"https://ui.aceternity.com/components/comet-card","image":"https://assets.aceternity.com/comet-card.webp","video":null},{"name":"background-ripple-effect","title":"Background Ripple Effect","description":"A grid of cells that ripple when clicked.","categories":["background","ripple","effect"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/background-ripple-effect.tsx"],"installCommand":"npx shadcn@latest add @aceternity/background-ripple-effect","documentationUrl":"https://ui.aceternity.com/components/background-ripple-effect","image":"https://assets.aceternity.com/background-ripple-effect.webp","video":null},{"name":"pixelated-canvas","title":"Pixelated Canvas","description":"Convert any image to a pixelated canvas mouse distortion effects, as seen on Tailwind CSS Website.","categories":["card","3D","tilt","background"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/pixelated-canvas.tsx"],"installCommand":"npx shadcn@latest add @aceternity/pixelated-canvas","documentationUrl":"https://ui.aceternity.com/components/pixelated-canvas","image":"https://assets.aceternity.com/pixelated-canvas.webp","video":null},{"name":"canvas-text","title":"Canvas Text","description":"Animated text component with colorful curved lines rendered on canvas, clipped to the text shape.","categories":["text","animation","canvas","background"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/canvas-text.tsx"],"installCommand":"npx shadcn@latest add @aceternity/canvas-text","documentationUrl":"https://ui.aceternity.com/components/canvas-text","image":"https://assets.aceternity.com/components/canvas-text.webp","video":null},{"name":"layout-text-flip","title":"Layout Text Flip","description":"A text flip effect that changes the layout of surrounding text","categories":["text","hero","effect"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/layout-text-flip.tsx"],"installCommand":"npx shadcn@latest add @aceternity/layout-text-flip","documentationUrl":"https://ui.aceternity.com/components/layout-text-flip","image":"https://assets.aceternity.com/layout-text-flip.webp","video":null},{"name":"dotted-glow-background","title":"Dotted Glow Background","description":"A background effect with opacity animation, glow effect and more.","categories":["card","background","gradient","special","call to action"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/dotted-glow-background.tsx"],"installCommand":"npx shadcn@latest add @aceternity/dotted-glow-background","documentationUrl":"https://ui.aceternity.com/components/dotted-glow-background","image":"https://assets.aceternity.com/dotted-glow-background.webp","video":null},{"name":"tooltip-card","title":"Tooltip Card","description":"A tooltip card container that follows mouse pointer when hovered over","categories":["tooltip","card","special","call to action","Informative"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/tooltip-card.tsx"],"installCommand":"npx shadcn@latest add @aceternity/tooltip-card","documentationUrl":"https://ui.aceternity.com/components/tooltip-card","image":"https://assets.aceternity.com/tooltip-card.webp","video":null},{"name":"encrypted-text","title":"Encrypted Text","description":"A text component that reveals the text gradually, gibberish effect.","categories":["special","text"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/encrypted-text.tsx"],"installCommand":"npx shadcn@latest add @aceternity/encrypted-text","documentationUrl":"https://ui.aceternity.com/components/encrypted-text","image":"https://assets.aceternity.com/encrypted-text.webp","video":null},{"name":"noise-background","title":"Noise Background","description":"A dynamic background effect with animated gradients, noise texture, and smooth motion.","categories":["card","background","gradient","special","call to action"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/noise-background.tsx"],"installCommand":"npx shadcn@latest add @aceternity/noise-background","documentationUrl":"https://ui.aceternity.com/components/noise-background","image":"https://assets.aceternity.com/noise-background.webp","video":null},{"name":"dither-shader","title":"Dither Shader","description":"A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.","categories":["card","background","gradient","special","call to action"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/dither-shader.tsx"],"installCommand":"npx shadcn@latest add @aceternity/dither-shader","documentationUrl":"https://ui.aceternity.com/components/dither-shader","image":"https://assets.aceternity.com/dither-shader.webp","video":null},{"name":"cloud-shader","title":"Cloud Shader","description":"Soft procedural clouds that drift across the sky. Tune speed, count, and colors with props.","categories":["background","special"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/cloud-shader.tsx"],"installCommand":"npx shadcn@latest add @aceternity/cloud-shader","documentationUrl":"https://ui.aceternity.com/components/cloud-shader","image":"https://assets.aceternity.com/components/cloud-shader.webp","video":null},{"name":"chromatic-image","title":"Chromatic Image","description":"An interactive image with responsive color separation, displacement, and tilt.","categories":["image","animation","canvas","special"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/chromatic-image.tsx"],"installCommand":"npx shadcn@latest add @aceternity/chromatic-image","documentationUrl":"https://ui.aceternity.com/components/chromatic-image","image":"https://assets.aceternity.com/components/chromatic-image.webp","video":null},{"name":"webcam-pixel-grid","title":"Webcam Pixel Grid","description":"A real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.","categories":["card","background","gradient","special","call to action"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/webcam-pixel-grid.tsx"],"installCommand":"npx shadcn@latest add @aceternity/webcam-pixel-grid","documentationUrl":"https://ui.aceternity.com/components/webcam-pixel-grid","image":"https://assets.aceternity.com/webcam-pixel-grid.webp","video":null},{"name":"images-badge","title":"Images Badge","description":"A badge with images that can be hovered to reveal more images.","categories":["card","background","gradient","special","call to action"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/images-badge.tsx"],"installCommand":"npx shadcn@latest add @aceternity/images-badge","documentationUrl":"https://ui.aceternity.com/components/images-badge","image":"https://assets.aceternity.com/images-badge.webp","video":null},{"name":"keyboard","title":"Keyboard","description":"A mac style keyboard component with mechanical keys sound effects.","categories":["card","background","gradient","special","call to action"],"dependencies":["@tabler/icons-react","motion/react"],"devDependencies":[],"registryDependencies":[],"files":["ui/keyboard.tsx"],"installCommand":"npx shadcn@latest add @aceternity/keyboard","documentationUrl":"https://ui.aceternity.com/components/keyboard","image":"https://assets.aceternity.com/components/keyboard.webp","video":null},{"name":"terminal","title":"Terminal","description":"A mac style terminal component with bash syntax highlighting and typewriter effect.","categories":["card","background","special","illustration"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/terminal.tsx"],"installCommand":"npx shadcn@latest add @aceternity/terminal","documentationUrl":"https://ui.aceternity.com/components/terminal","image":"https://assets.aceternity.com/components/terminal.webp","video":null},{"name":"3d-globe","title":"3D Globe","description":"A realistic globe component with tooltips and avatar tips","categories":["card","3d","background","special","call to action"],"dependencies":["three","@react-three/fiber","@react-three/drei"],"devDependencies":["@types/three"],"registryDependencies":[],"files":["ui/3d-globe.tsx"],"installCommand":"npx shadcn@latest add @aceternity/3d-globe","documentationUrl":"https://ui.aceternity.com/components/3d-globe","image":"https://assets.aceternity.com/components/3d-globe.webp","video":null},{"name":"ascii-art","title":"ASCII Art","description":"Convert any image to ASCII art with customizable charsets, colors, and animations.","categories":["card","image","canvas","background"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/ascii-art.tsx"],"installCommand":"npx shadcn@latest add @aceternity/ascii-art","documentationUrl":"https://ui.aceternity.com/components/ascii-art","image":"https://assets.aceternity.com/components/ascii-art.webp","video":null},{"name":"scales","title":"Scales","description":"A repeating diagonal, horizontal, or vertical line pattern background effect.","categories":["background","pattern","special"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/scales.tsx"],"installCommand":"npx shadcn@latest add @aceternity/scales","documentationUrl":"https://ui.aceternity.com/components/scales","image":"https://assets.aceternity.com/components/scales.webp","video":null},{"name":"text-flipping-board","title":"Text Flipping Board","description":"A split-flap display component that animates characters with flip transitions, inspired by Vestaboard.","categories":["text","special","hero"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":["ui/text-flipping-board.tsx"],"installCommand":"npx shadcn@latest add @aceternity/text-flipping-board","documentationUrl":"https://ui.aceternity.com/components/text-flipping-board","image":"https://assets.aceternity.com/components/text-flipping-board.webp","video":null},{"name":"background-cubes-grid","title":"Background Cubes Grid","description":"A grid of 3D cubes that ripples under the cursor. Use the flat isometric field or a tilted perspective grid with glowing crests.","categories":["background","3d","interactive"],"dependencies":["three","motion"],"devDependencies":["@types/three"],"registryDependencies":[],"files":["ui/background-cubes-grid.tsx"],"installCommand":"npx shadcn@latest add @aceternity/background-cubes-grid","documentationUrl":"https://ui.aceternity.com/components/background-cubes-grid","image":"https://assets.aceternity.com/components/background-cubes-grid.webp","video":null},{"name":"liquid-glass","title":"Liquid Glass","description":"A glass surface that refracts the content behind it, with a curved rim, color fringing and a frosted fallback for every browser.","categories":["special","effects","interactive"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"files":["ui/liquid-glass.tsx"],"installCommand":"npx shadcn@latest add @aceternity/liquid-glass","documentationUrl":"https://ui.aceternity.com/components/liquid-glass","image":"https://assets.aceternity.com/components/liquid-glass.webp","video":null}],"blocks":[{"name":"cards-demo-1","title":"Cards Demo 1","dependencies":["react-icons"],"registryDependencies":[],"files":["block/cards-demo-1.tsx"],"installCommand":"npx shadcn@latest add @aceternity/cards-demo-1"},{"name":"cards-demo-2","title":"Cards Demo 2","dependencies":[],"registryDependencies":[],"files":["block/cards-demo-2.tsx"],"installCommand":"npx shadcn@latest add @aceternity/cards-demo-2"},{"name":"cards-demo-3","title":"Cards Demo 3","dependencies":[],"registryDependencies":[],"files":["block/cards-demo-3.tsx"],"installCommand":"npx shadcn@latest add @aceternity/cards-demo-3"},{"name":"features-section-demo-1","title":"Features Section Demo 1","dependencies":[],"registryDependencies":[],"files":["block/features-section-demo-1.tsx"],"installCommand":"npx shadcn@latest add @aceternity/features-section-demo-1"},{"name":"features-section-demo-2","title":"Features Section Demo 2","dependencies":["@tabler/icons-react"],"registryDependencies":[],"files":["block/features-section-demo-2.tsx"],"installCommand":"npx shadcn@latest add @aceternity/features-section-demo-2"},{"name":"features-section-demo-3","title":"Features Section Demo 3","dependencies":["@tabler/icons-react","cobe"],"registryDependencies":[],"files":["block/features-section-demo-3.tsx"],"installCommand":"npx shadcn@latest add @aceternity/features-section-demo-3"},{"name":"expandable-card-demo-standard","title":"Expandable Card Demo Standard","dependencies":[],"registryDependencies":["use-outside-click"],"files":["block/expandable-card-demo-standard.tsx"],"installCommand":"npx shadcn@latest add @aceternity/expandable-card-demo-standard"},{"name":"expandable-card-demo-grid","title":"Expandable Card Demo Grid","dependencies":[],"registryDependencies":["use-outside-click"],"files":["block/expandable-card-demo-grid.tsx"],"installCommand":"npx shadcn@latest add @aceternity/expandable-card-demo-grid"},{"name":"hero-section-demo-1","title":"Hero Section Demo 1","dependencies":[],"registryDependencies":[],"files":["block/hero-section-demo-1.tsx"],"installCommand":"npx shadcn@latest add @aceternity/hero-section-demo-1"}],"hooks":[{"name":"use-outside-click","title":"Use Outside Click","files":["hooks/use-outside-click.tsx"],"installCommand":"npx shadcn@latest add @aceternity/use-outside-click"}]}