PODIE UI components

podie.dev · 2026-10-01 · by Long Nguyen ·generic
Explore React UI components with live demos, original source code, and installation from PODIE using npm, pnpm, yarn, or bun.

PODIE UI components

PODIE UI components

Landing

[](https://podie.dev/components/codrops--3-dstack-motion)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--3-dstack-motion.json`Copy

3D Stack Motion on ScrollCodrops

[](https://podie.dev/components/codrops--intro-grid-motion-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--intro-grid-motion-transition.json`Copy

Intro Grid with Hover MotionCodrops

[](https://podie.dev/components/codrops--on-scroll-layout-formations)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--on-scroll-layout-formations.json`Copy

On-Scroll Layout FormationsCodrops

[](https://podie.dev/components/codrops--one-element-scroll)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--one-element-scroll.json`Copy

Consecutive Scroll Animations with One ElementCodrops

[](https://podie.dev/components/codrops--rotating-on-scroll-animations)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--rotating-on-scroll-animations.json`Copy

Rotating On-Scroll AnimationsCodrops

[](https://podie.dev/components/codrops--scroll3-dgrid)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--scroll3-dgrid.json`Copy

On-Scroll 3D Grid AnimationsCodrops

[](https://podie.dev/components/codrops--staggered3-dgrid-animations)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--staggered3-dgrid-animations.json`Copy

Staggered (3D) Grid Animations with Scroll-Triggered EffectsCodrops

[](https://podie.dev/components/codrops--sticky-sections)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--sticky-sections.json`Copy

Animations for Sticky SectionsCodrops

[](https://podie.dev/components/skiper--skiper16)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper16.json`Copy

Card stack scrollSkiper UI

[](https://podie.dev/components/skiper--skiper17)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper17.json`Copy

Card stack with gsap and rotateSkiper UI

[](https://podie.dev/components/skiper--skiper19)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper19.json`Copy

Svg follow scrollSkiper UI

[](https://podie.dev/components/skiper--skiper30)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper30.json`Copy

Oliver parallaxSkiper UI

[](https://podie.dev/components/skiper--skiper34)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper34.json`Copy

Scroll images reveal 003Skiper UI

[](https://podie.dev/components/21st--topo-field)

`pnpm dlx shadcn@latest add https://podie.dev/r/21st--topo-field.json`Copy

Topo FieldMeng To · 21st.dev

[](https://podie.dev/components/codrops--intro-trail-effect)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--intro-trail-effect.json`Copy

Intro Image Trail AnimationCodrops

Loading

[](https://podie.dev/components/smooth--ai-loader)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--ai-loader.json`Copy

Ai LoaderSmooth UI

[](https://podie.dev/components/smooth--grid-loader)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--grid-loader.json`Copy

Grid LoaderSmooth UI

[](https://podie.dev/components/smooth--motion-loader)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--motion-loader.json`Copy

Motion LoaderSmooth UI

[](https://podie.dev/components/smooth--skeleton-loader)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--skeleton-loader.json`Copy

Skeleton LoaderSmooth UI

[](https://podie.dev/components/kokonut--ai-loading)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--ai-loading.json`Copy

AI State LoadingKokonut UI

[](https://podie.dev/components/kokonut--ai-text-loading)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--ai-text-loading.json`Copy

AI Text LoadingKokonut UI

[](https://podie.dev/components/kokonut--loader)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--loader.json`Copy

LoaderKokonut UI

[](https://podie.dev/components/codrops--rapid-layers-animation)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--rapid-layers-animation.json`Copy

Rapid Image Layers AnimationCodrops

[](https://podie.dev/components/codrops--image-pixel-loading)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--image-pixel-loading.json`Copy

On-Scroll Pixelated Image Loading EffectCodrops

[](https://podie.dev/components/codrops--page-preloading-effect)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--page-preloading-effect.json`Copy

Page Preloading AnimationCodrops

[](https://podie.dev/components/codrops--page-loading-effects)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--page-loading-effects.json`Copy

Page Loading EffectsCodrops

Menu

[](https://podie.dev/components/codrops--background-scale-hover-effect)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--background-scale-hover-effect.json`Copy

Background Scale Hover EffectCodrops

[](https://podie.dev/components/codrops--image-tiles-menu)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--image-tiles-menu.json`Copy

Image Tiles Menu AnimationCodrops

[](https://podie.dev/components/codrops--marquee-menu)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--marquee-menu.json`Copy

Marquee Menu Hover AnimationCodrops

[](https://podie.dev/components/codrops--ease-reverse-clip-menu)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--ease-reverse-clip-menu.json`Copy

GSAP EaseReverse Clip MenuCodrops

[](https://podie.dev/components/codrops--inline-menu-layout)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--inline-menu-layout.json`Copy

Inline Menu Layout with Gallery PanelCodrops

[](https://podie.dev/components/codrops--3-dletters-menu-hover)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--3-dletters-menu-hover.json`Copy

3D Letters Menu Hover EffectCodrops

[](https://podie.dev/components/codrops--menu-to-grid)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--menu-to-grid.json`Copy

Menu To Grid Layout AnimationCodrops

[](https://podie.dev/components/codrops--letter-shuffle-menu)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--letter-shuffle-menu.json`Copy

Letter Shuffle Animation for a MenuCodrops

[](https://podie.dev/components/codrops--menu-full-grid)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--menu-full-grid.json`Copy

Menu to Full Grid LayoutCodrops

[](https://podie.dev/components/codrops--expanding-rounded-menu)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--expanding-rounded-menu.json`Copy

Expanding Rounded Menu AnimationCodrops

[](https://podie.dev/components/codrops--rapid-image-hover-menu)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--rapid-image-hover-menu.json`Copy

Rapid Image Hover MenuCodrops

[](https://podie.dev/components/codrops--scroll-loop-menu)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--scroll-loop-menu.json`Copy

Scroll Loop MenuCodrops

Navigation

[](https://podie.dev/components/motion-primitives--animated-background)

`pnpm dlx shadcn@latest add https://podie.dev/r/motion-primitives--animated-background.json`Copy

Animated BackgroundMotion Primitives

[](https://podie.dev/components/smooth--animated-stepper)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--animated-stepper.json`Copy

Animated StepperSmooth UI

[](https://podie.dev/components/smooth--animated-tabs)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--animated-tabs.json`Copy

Animated TabsSmooth UI

[](https://podie.dev/components/skiper--skiper40)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper40.json`Copy

CssLinkSkiper UI

Carousel

[](https://podie.dev/components/codrops--gradient-carousel)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--gradient-carousel.json`Copy

Infinite Gradient 3D CarouselClément Grellier · Codrops

[](https://podie.dev/components/codrops--rotating-gallery)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--rotating-gallery.json`Copy

Rotating WebGL GalleryOluwaseyi Oluwadare · Codrops

[](https://podie.dev/components/smooth--coverflow-carousel)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--coverflow-carousel.json`Copy

Coverflow CarouselSmooth UI

[](https://podie.dev/components/codrops--3-dcarousel)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--3-dcarousel.json`Copy

On-Scroll 3D CarouselCodrops

[](https://podie.dev/components/codrops--diagonal-thumbnails)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--diagonal-thumbnails.json`Copy

Diagonal Thumbnails SlideshowCodrops

[](https://podie.dev/components/skiper--skiper47)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper47.json`Copy

Perspective carouselSkiper UI

[](https://podie.dev/components/skiper--skiper48)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper48.json`Copy

Card swipe carouselSkiper UI

[](https://podie.dev/components/skiper--skiper49)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper49.json`Copy

Inverted perspective carouselSkiper UI

[](https://podie.dev/components/skiper--skiper50)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper50.json`Copy

Creative carousel 001Skiper UI

[](https://podie.dev/components/skiper--skiper51)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper51.json`Copy

Creative carousel 002Skiper UI

Transitions

[](https://podie.dev/components/codrops--repeating-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--repeating-transition.json`Copy

Repeating Image TransitionManoela Ilic · Codrops

[](https://podie.dev/components/smooth--aperture-blur-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--aperture-blur-transition.json`Copy

Aperture Blur TransitionSmooth UI

[](https://podie.dev/components/smooth--chroma-blur-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--chroma-blur-transition.json`Copy

Chroma Blur TransitionSmooth UI

[](https://podie.dev/components/smooth--prism-sweep-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--prism-sweep-transition.json`Copy

Prism Sweep TransitionSmooth UI

[](https://podie.dev/components/smooth--sdf-blob-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--sdf-blob-transition.json`Copy

Sdf Blob TransitionSmooth UI

[](https://podie.dev/components/smooth--sdf-circle-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--sdf-circle-transition.json`Copy

Sdf Circle TransitionSmooth UI

[](https://podie.dev/components/smooth--organic-merge-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--organic-merge-transition.json`Copy

Organic Merge TransitionSmooth UI

[](https://podie.dev/components/smooth--radial-circles-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--radial-circles-transition.json`Copy

Radial Circles TransitionSmooth UI

[](https://podie.dev/components/smooth--warped-circle-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--warped-circle-transition.json`Copy

Warped Circle TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-transition.json`Copy

Shader Reveal TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-circle-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-circle-transition.json`Copy

Shader Reveal Circle TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-luma-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-luma-transition.json`Copy

Shader Reveal Luma TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-noise-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-noise-transition.json`Copy

Shader Reveal Noise TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-planetary-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-planetary-transition.json`Copy

Shader Reveal Planetary TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-push-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-push-transition.json`Copy

Shader Reveal Push TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-stripes-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-stripes-transition.json`Copy

Shader Reveal Stripes TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-wipe-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-wipe-transition.json`Copy

Shader Reveal Wipe TransitionSmooth UI

[](https://podie.dev/components/smooth--shader-reveal-zoom-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shader-reveal-zoom-transition.json`Copy

Shader Reveal Zoom TransitionSmooth UI

[](https://podie.dev/components/codrops--cover-page-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--cover-page-transition.json`Copy

Cover Page TransitionCodrops

[](https://podie.dev/components/codrops--grid-view-switch)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--grid-view-switch.json`Copy

Grid View Switch AnimationCodrops

[](https://podie.dev/components/codrops--kinetic-type-page-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--kinetic-type-page-transition.json`Copy

Kinetic Typography Page TransitionCodrops

[](https://podie.dev/components/codrops--morphing-page-transition)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--morphing-page-transition.json`Copy

Morphing Page TransitionCodrops

Backgrounds

[](https://podie.dev/components/magicui--ripple)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--ripple.json`Copy

RippleMagic UI

[](https://podie.dev/components/smooth--arcade-pixel)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--arcade-pixel.json`Copy

Arcade PixelSmooth UI

[](https://podie.dev/components/smooth--aurora-curtain)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--aurora-curtain.json`Copy

Aurora CurtainSmooth UI

[](https://podie.dev/components/smooth--gravity-stars)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--gravity-stars.json`Copy

Gravity StarsSmooth UI

[](https://podie.dev/components/smooth--liquid-metal)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--liquid-metal.json`Copy

Liquid MetalSmooth UI

[](https://podie.dev/components/smooth--orb)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--orb.json`Copy

OrbSmooth UI

[](https://podie.dev/components/smooth--pixel-flow-field)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--pixel-flow-field.json`Copy

Pixel Flow FieldSmooth UI

[](https://podie.dev/components/magicui--animated-grid-pattern)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--animated-grid-pattern.json`Copy

Animated Grid PatternMagic UI

[](https://podie.dev/components/magicui--retro-grid)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--retro-grid.json`Copy

Retro GridMagic UI

[](https://podie.dev/components/magicui--meteors)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--meteors.json`Copy

MeteorsMagic UI

[](https://podie.dev/components/magicui--particles)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--particles.json`Copy

ParticlesMagic UI

[](https://podie.dev/components/magicui--light-rays)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--light-rays.json`Copy

Light RaysMagic UI

[](https://podie.dev/components/magicui--flickering-grid)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--flickering-grid.json`Copy

Flickering GridMagic UI

[](https://podie.dev/components/magicui--floating-3d-particles)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--floating-3d-particles.json`Copy

Floating 3D ParticlesMagic UI

[](https://podie.dev/components/magicui--glyph-matrix)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--glyph-matrix.json`Copy

Glyph MatrixMagic UI

[](https://podie.dev/components/kokonut--flow-field)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--flow-field.json`Copy

Flow FieldKokonut UI

[](https://podie.dev/components/kraavon--shader-gradient)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--shader-gradient.json`Copy

Shader GradientKraavon UI

[](https://podie.dev/components/kraavon--soft-aurora)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--soft-aurora.json`Copy

Soft AuroraKraavon UI

[](https://podie.dev/components/kraavon--light-beam)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--light-beam.json`Copy

Light BeamKraavon UI

[](https://podie.dev/components/kraavon--noise-background)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--noise-background.json`Copy

Noise BackgroundKraavon UI

[](https://podie.dev/components/kraavon--particle-cloud)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--particle-cloud.json`Copy

Particle CloudKraavon UI

[](https://podie.dev/components/kraavon--mesh-gradient)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--mesh-gradient.json`Copy

Mesh GradientKraavon UI

[](https://podie.dev/components/kraavon--vortex-background)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--vortex-background.json`Copy

Vortex BackgroundKraavon UI

[](https://podie.dev/components/kraavon--stars-background)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--stars-background.json`Copy

Stars BackgroundKraavon UI

[](https://podie.dev/components/kraavon--particle-field)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--particle-field.json`Copy

Particle FieldKraavon UI

[](https://podie.dev/components/21st--ghost-ether)

`pnpm dlx shadcn@latest add https://podie.dev/r/21st--ghost-ether.json`Copy

Ghost Ethercodeweb-dev · 21st.dev

3D

Hover to animate[](https://podie.dev/components/kraavon--torus-knot)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--torus-knot.json`Copy

Torus KnotKraavon UI

Hover to animate[](https://podie.dev/components/kraavon--floating-sphere)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--floating-sphere.json`Copy

Floating SphereKraavon UI

Hover to animate[](https://podie.dev/components/kraavon--wave-plane)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--wave-plane.json`Copy

Wave PlaneKraavon UI

Cards

[](https://podie.dev/components/magicui--border-beam)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--border-beam.json`Copy

Border BeamMagic UI

[](https://podie.dev/components/magicui--shine-border)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--shine-border.json`Copy

Shine BorderMagic UI

[](https://podie.dev/components/smooth--border-beam)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--border-beam.json`Copy

Border BeamSmooth UI

[](https://podie.dev/components/smooth--glow-hover-card)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--glow-hover-card.json`Copy

Glow Hover CardSmooth UI

[](https://podie.dev/components/smooth--switchboard-card)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--switchboard-card.json`Copy

Switchboard CardSmooth UI

[](https://podie.dev/components/smooth--tilt-card)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--tilt-card.json`Copy

Tilt CardSmooth UI

[](https://podie.dev/components/magicui--neon-gradient-card)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--neon-gradient-card.json`Copy

Neon Gradient CardMagic UI

[](https://podie.dev/components/magicui--glare-hover)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--glare-hover.json`Copy

Glare HoverMagic UI

[](https://podie.dev/components/skiper--skiper52)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper52.json`Copy

ExpandOnHoverSkiper UI

[](https://podie.dev/components/skiper--skiper53)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper53.json`Copy

ExpandOnHover verticalSkiper UI

[](https://podie.dev/components/kraavon--holographic-card)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--holographic-card.json`Copy

Holographic CardKraavon UI

Interaction

[](https://podie.dev/components/magicui--blur-fade)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--blur-fade.json`Copy

Blur FadeMagic UI

[](https://podie.dev/components/smooth--agent-avatar)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--agent-avatar.json`Copy

Agent AvatarSmooth UI

[](https://podie.dev/components/smooth--basic-accordion)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--basic-accordion.json`Copy

Basic AccordionSmooth UI

[](https://podie.dev/components/smooth--mac-terminal)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--mac-terminal.json`Copy

Mac TerminalSmooth UI

[](https://podie.dev/components/smooth--magnetic-field)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--magnetic-field.json`Copy

Magnetic FieldSmooth UI

[](https://podie.dev/components/magicui--marquee)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--marquee.json`Copy

MarqueeMagic UI

[](https://podie.dev/components/magicui--animated-list)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--animated-list.json`Copy

Animated ListMagic UI

[](https://podie.dev/components/magicui--orbiting-circles)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--orbiting-circles.json`Copy

Orbiting CirclesMagic UI

[](https://podie.dev/components/kokonut--currency-transfer)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--currency-transfer.json`Copy

Currency TransferKokonut UI

[](https://podie.dev/components/eldora--marquee)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--marquee.json`Copy

marqueeEldora UI

[](https://podie.dev/components/codrops--gooey-cursor)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--gooey-cursor.json`Copy

Gooey Cursor EffectCodrops

[](https://podie.dev/components/codrops--motion-trail-animations)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--motion-trail-animations.json`Copy

Ideas for Image Motion Trail AnimationsCodrops

[](https://podie.dev/components/codrops--repetition-hover-effect)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--repetition-hover-effect.json`Copy

Repetition Hover EffectCodrops

[](https://podie.dev/components/skiper--skiper62)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper62.json`Copy

Loop animation hookSkiper UI

[](https://podie.dev/components/kraavon--cursor-trail)

`pnpm dlx shadcn@latest add https://podie.dev/r/kraavon--cursor-trail.json`Copy

Cursor TrailKraavon UI

Typography

[](https://podie.dev/components/magicui--number-ticker)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--number-ticker.json`Copy

Number TickerMagic UI

[](https://podie.dev/components/motion-primitives--text-shimmer)

`pnpm dlx shadcn@latest add https://podie.dev/r/motion-primitives--text-shimmer.json`Copy

Text ShimmerMotion Primitives

[](https://podie.dev/components/motion-primitives--text-effect)

`pnpm dlx shadcn@latest add https://podie.dev/r/motion-primitives--text-effect.json`Copy

Text EffectMotion Primitives

[](https://podie.dev/components/magicui--sparkles-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--sparkles-text.json`Copy

Sparkles TextMagic UI

[](https://podie.dev/components/smooth--blur-out-up)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--blur-out-up.json`Copy

Blur Out UpSmooth UI

[](https://podie.dev/components/smooth--bottom-up-letters)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--bottom-up-letters.json`Copy

Bottom Up LettersSmooth UI

[](https://podie.dev/components/smooth--depth-parallax-words)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--depth-parallax-words.json`Copy

Depth Parallax WordsSmooth UI

[](https://podie.dev/components/smooth--focus-blur-resolve)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--focus-blur-resolve.json`Copy

Focus Blur ResolveSmooth UI

[](https://podie.dev/components/smooth--line-by-line-slide)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--line-by-line-slide.json`Copy

Line By Line SlideSmooth UI

[](https://podie.dev/components/smooth--mask-reveal-up)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--mask-reveal-up.json`Copy

Mask Reveal UpSmooth UI

[](https://podie.dev/components/smooth--micro-scale-fade)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--micro-scale-fade.json`Copy

Micro Scale FadeSmooth UI

[](https://podie.dev/components/smooth--per-character-rise)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--per-character-rise.json`Copy

Per Character RiseSmooth UI

[](https://podie.dev/components/smooth--per-word-crossfade)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--per-word-crossfade.json`Copy

Per Word CrossfadeSmooth UI

[](https://podie.dev/components/smooth--reveal-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--reveal-text.json`Copy

Reveal TextSmooth UI

[](https://podie.dev/components/smooth--scale-down-fade)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--scale-down-fade.json`Copy

Scale Down FadeSmooth UI

[](https://podie.dev/components/smooth--scramble-hover)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--scramble-hover.json`Copy

Scramble HoverSmooth UI

[](https://podie.dev/components/smooth--shine-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shine-text.json`Copy

Shine TextSmooth UI

[](https://podie.dev/components/smooth--soft-blur-in)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--soft-blur-in.json`Copy

Soft Blur InSmooth UI

[](https://podie.dev/components/smooth--spring-scale-in)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--spring-scale-in.json`Copy

Spring Scale InSmooth UI

[](https://podie.dev/components/smooth--stagger-from-center)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--stagger-from-center.json`Copy

Stagger From CenterSmooth UI

[](https://podie.dev/components/smooth--stagger-from-edges)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--stagger-from-edges.json`Copy

Stagger From EdgesSmooth UI

[](https://podie.dev/components/smooth--top-down-letters)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--top-down-letters.json`Copy

Top Down LettersSmooth UI

[](https://podie.dev/components/smooth--wave-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--wave-text.json`Copy

Wave TextSmooth UI

[](https://podie.dev/components/smooth--fade-through)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--fade-through.json`Copy

Fade ThroughSmooth UI

[](https://podie.dev/components/smooth--kinetic-center-build)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--kinetic-center-build.json`Copy

Kinetic Center BuildSmooth UI

[](https://podie.dev/components/smooth--shared-axis-x)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shared-axis-x.json`Copy

Shared Axis XSmooth UI

[](https://podie.dev/components/smooth--shared-axis-y)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shared-axis-y.json`Copy

Shared Axis YSmooth UI

[](https://podie.dev/components/smooth--shared-axis-z)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--shared-axis-z.json`Copy

Shared Axis ZSmooth UI

[](https://podie.dev/components/smooth--short-slide-down)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--short-slide-down.json`Copy

Short Slide DownSmooth UI

[](https://podie.dev/components/smooth--short-slide-right)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--short-slide-right.json`Copy

Short Slide RightSmooth UI

[](https://podie.dev/components/smooth--perspective-text-3d)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--perspective-text-3d.json`Copy

Perspective Text 3dSmooth UI

[](https://podie.dev/components/smooth--number-flow)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--number-flow.json`Copy

Number FlowSmooth UI

[](https://podie.dev/components/magicui--animated-gradient-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--animated-gradient-text.json`Copy

Animated Gradient TextMagic UI

[](https://podie.dev/components/magicui--animated-shiny-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--animated-shiny-text.json`Copy

Animated Shiny TextMagic UI

[](https://podie.dev/components/magicui--aurora-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--aurora-text.json`Copy

Aurora TextMagic UI

[](https://podie.dev/components/magicui--hyper-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--hyper-text.json`Copy

Hyper TextMagic UI

[](https://podie.dev/components/magicui--line-shadow-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--line-shadow-text.json`Copy

Line Shadow TextMagic UI

[](https://podie.dev/components/magicui--text-animate)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--text-animate.json`Copy

Text AnimateMagic UI

[](https://podie.dev/components/magicui--typing-animation)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--typing-animation.json`Copy

Typing AnimationMagic UI

[](https://podie.dev/components/magicui--word-rotate)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--word-rotate.json`Copy

Word RotateMagic UI

[](https://podie.dev/components/magicui--dia-text-reveal)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--dia-text-reveal.json`Copy

Dia Text RevealMagic UI

[](https://podie.dev/components/magicui--morphing-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--morphing-text.json`Copy

Morphing TextMagic UI

[](https://podie.dev/components/magicui--spinning-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--spinning-text.json`Copy

Spinning TextMagic UI

[](https://podie.dev/components/kokonut--dynamic-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--dynamic-text.json`Copy

Dynamic TextKokonut UI

[](https://podie.dev/components/kokonut--glitch-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--glitch-text.json`Copy

Glitch TextKokonut UI

[](https://podie.dev/components/kokonut--matrix-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--matrix-text.json`Copy

Matrix TextKokonut UI

[](https://podie.dev/components/kokonut--shimmer-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--shimmer-text.json`Copy

Shimmer TextKokonut UI

[](https://podie.dev/components/eldora--blur-in-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--blur-in-text.json`Copy

blur-in-textEldora UI

[](https://podie.dev/components/eldora--fade-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--fade-text.json`Copy

fade-textEldora UI

[](https://podie.dev/components/eldora--gradual-spacing-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--gradual-spacing-text.json`Copy

gradual-spacing-textEldora UI

[](https://podie.dev/components/eldora--letter-pull-up-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--letter-pull-up-text.json`Copy

letter-pull-up-textEldora UI

[](https://podie.dev/components/eldora--wavy-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--wavy-text.json`Copy

wavy-textEldora UI

[](https://podie.dev/components/eldora--word-pull-up-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--word-pull-up-text.json`Copy

word-pull-up-textEldora UI

[](https://podie.dev/components/eldora--multi-direction-slide-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--multi-direction-slide-text.json`Copy

multi-direction-slide-textEldora UI

[](https://podie.dev/components/eldora--seperate-away-text)

`pnpm dlx shadcn@latest add https://podie.dev/r/eldora--seperate-away-text.json`Copy

seperate-away-textEldora UI

[](https://podie.dev/components/codrops--circular-text-effect)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--circular-text-effect.json`Copy

Circular Text EffectCodrops

[](https://podie.dev/components/codrops--on-scroll-typography-animations)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--on-scroll-typography-animations.json`Copy

On-Scroll Typography AnimationsCodrops

[](https://podie.dev/components/codrops--scroll-text-motion)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--scroll-text-motion.json`Copy

On-Scroll Text MotionCodrops

[](https://podie.dev/components/codrops--sliced-text-effect)

`pnpm dlx shadcn@latest add https://podie.dev/r/codrops--sliced-text-effect.json`Copy

Glass Text EffectCodrops

[](https://podie.dev/components/skiper--skiper28)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper28.json`Copy

3D perspective textSkiper UI

[](https://podie.dev/components/skiper--skiper31)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper31.json`Copy

Text Scroll animationSkiper UI

[](https://podie.dev/components/skiper--skiper37)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper37.json`Copy

Animated numberSkiper UI

Buttons

[](https://podie.dev/components/motion-primitives--magnetic)

`pnpm dlx shadcn@latest add https://podie.dev/r/motion-primitives--magnetic.json`Copy

MagneticMotion Primitives

[](https://podie.dev/components/smooth--magnetic-button)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--magnetic-button.json`Copy

Magnetic ButtonSmooth UI

[](https://podie.dev/components/magicui--pulsating-button)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--pulsating-button.json`Copy

Pulsating ButtonMagic UI

[](https://podie.dev/components/magicui--ripple-button)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--ripple-button.json`Copy

Ripple ButtonMagic UI

[](https://podie.dev/components/magicui--shiny-button)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--shiny-button.json`Copy

Shiny ButtonMagic UI

[](https://podie.dev/components/kokonut--attract-button)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--attract-button.json`Copy

Magnet ButtonKokonut UI

[](https://podie.dev/components/kokonut--hold-button)

`pnpm dlx shadcn@latest add https://podie.dev/r/kokonut--hold-button.json`Copy

Hold ButtonKokonut UI

[](https://podie.dev/components/skiper--skiper3)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper3.json`Copy

Apple play buttonSkiper UI

Feedback

[](https://podie.dev/components/smooth--animated-progress-bar)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--animated-progress-bar.json`Copy

Animated Progress BarSmooth UI

[](https://podie.dev/components/magicui--animated-circular-progress-bar)

`pnpm dlx shadcn@latest add https://podie.dev/r/magicui--animated-circular-progress-bar.json`Copy

Animated Circular Progress BarMagic UI

[](https://podie.dev/components/skiper--skiper89)

`pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper89.json`Copy

Scroll progress 001Skiper UI

Inputs

[](https://podie.dev/components/smooth--animated-toggle)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--animated-toggle.json`Copy

Animated ToggleSmooth UI

AI & chat

[](https://podie.dev/components/smooth--ai-response)

`pnpm dlx shadcn@latest add https://podie.dev/r/smooth--ai-response.json`Copy

Ai ResponseSmooth UI

podie.dev · 200 images · 224 links

Comments (0)

No comments yet