@pulkitxm
A personal shadcn registry by developer Pulkit offering 31 GSAP- and Framer Motion-powered components for expressive UIs: slide-in-text, text-scramble, typewriter, stagger-reveal-grid, tilt-card-glare, aurora-background, fluid-cursor-trail, magnetic-cursor-dock, svg-morph-button, svg-particle, swap-button, parallax-image, gravity-scroll-cards, horizontal-scroll-gallery, scroll-linked-video-scrubber, infinite-circular-scroll, cursor-spotlight, scroll-progress, resizable-panels, number-counter, handwriting-svg, network-image, animated-underline, animated-underline-navbar, and more. Tailwind CSS, React. Free. Use for: drop-in scroll-linked animations, cursor effects, and motion-driven text components in marketing pages or portfolios.
Install this registry
npx shadcn@latest add https://pulkit.page/components/registry.json pnpm dlx shadcn@latest add https://pulkit.page/components/registry.json bunx shadcn@latest add https://pulkit.page/components/registry.json curl -s https://pulkit.page/components/registry.json Components
31 totalAnimates text sliding in from the left with a fade on scroll into view.
npx shadcn@latest add https://pulkit.page/components/slide-in-text.json Image component that adapts quality and loading strategy based on real-time network speed.
npx shadcn@latest add https://pulkit.page/components/network-image.json Animated underline that tracks hover/active state and slides beneath nav items. Use with data-link-index on list items.
npx shadcn@latest add https://pulkit.page/components/animated-underline.json Sample navbar demonstrating AnimatedUnderline with hover and active states.
npx shadcn@latest add https://pulkit.page/components/animated-underline-navbar.json Confetti celebration effect on click. Wraps any trigger element and fires particles on interaction.
npx shadcn@latest add https://pulkit.page/components/party-popper.json Scroll-linked parallax effect for images or content. Moves children on scroll for depth.
npx shadcn@latest add https://pulkit.page/components/parallax-image.json Animated 404 page with subtle icon motion and reduced-motion support.
npx shadcn@latest add https://pulkit.page/components/not-found-page.json Accessible dark mode toggle with View Transitions API support and icon, icon-label, or dual-tab variants.
npx shadcn@latest add https://pulkit.page/components/theme-toggle.json Text that decrypts character by character with a scramble effect. Trigger on scroll, hover, or mount.
npx shadcn@latest add https://pulkit.page/components/text-scramble.json 3D card with tilt and holographic glare effect that follows the cursor.
npx shadcn@latest add https://pulkit.page/components/tilt-card-glare.json SVG path that draws itself on scroll, hover, or mount. Presets: diamond, circle, star, heart, arrow.
npx shadcn@latest add https://pulkit.page/components/line-draw-svg.json Canvas particle trail that follows the cursor. Fixed overlay, customizable color and particle count.
npx shadcn@latest add https://pulkit.page/components/fluid-cursor-trail.json Typewriter effect that cycles through phrases with variable typing speed and blinking cursor.
npx shadcn@latest add https://pulkit.page/components/typewriter.json macOS-style dock with magnetic cursor effect. Items scale and lift as cursor approaches.
npx shadcn@latest add https://pulkit.page/components/magnetic-cursor-dock.json Living aurora background with multiple variants. Sunset, ocean, forest, lavender, ember, ice.
npx shadcn@latest add https://pulkit.page/components/aurora-background.json Button with SVG path morph animation. Supports custom paths for idle, hover, loading, success.
npx shadcn@latest add https://pulkit.page/components/svg-morph-button.json 400x400 Three.js particle field from SVG. lucide-react, react-icons, Heroicons, Tabler, Phosphor, and similar libs work out of the box. Cursor repel + spring h…
npx shadcn@latest add https://pulkit.page/components/svg-particle.json Shadcn button that swaps between two labels (and optional icons) with a crossfade. Width stays put. No layout jump when copy changes.
npx shadcn@latest add https://pulkit.page/components/swap-button.json Grid that reveals items with wave-like stagger on scroll. Configurable columns and timing.
npx shadcn@latest add https://pulkit.page/components/stagger-reveal-grid.json SVG path that draws itself on mount. Pass path for custom shapes or text to render handwriting.
npx shadcn@latest add https://pulkit.page/components/handwriting-svg.json Cards that stack and unstack with scroll. Gravity-style depth effect.
npx shadcn@latest add https://pulkit.page/components/gravity-scroll-cards.json Scroll-jacks the page when the video reaches the viewport top. Scrubs video forward/backward with wheel input.
npx shadcn@latest add https://pulkit.page/components/scroll-linked-video-scrubber.json Pinned section where vertical scroll drives horizontal gallery position. Same pattern as Scroll-Linked Video Scrubber.
npx shadcn@latest add https://pulkit.page/components/horizontal-scroll-gallery.json Circular layout with numbered cards. Scroll wheel rotates the circle. No scrollbar, finite cards.
npx shadcn@latest add https://pulkit.page/components/infinite-circular-scroll.json Cursor spotlight effect. Dimmed background with bright radial gradient following cursor.
npx shadcn@latest add https://pulkit.page/components/cursor-spotlight.json Fixed bar at the top that scales horizontally with scroll progress. Uses Framer Motion for smooth updates.
npx shadcn@latest add https://pulkit.page/components/scroll-progress.json Drag-resizable panels for dashboards, IDEs, and editors. Supports horizontal/vertical layout and dynamic panel count.
npx shadcn@latest add https://pulkit.page/components/resizable-panels.json Animated number counter that counts from 0 to target. Tabular nums prevent layout shift, respects reduced motion.
npx shadcn@latest add https://pulkit.page/components/number-counter.json Accessible tabs with icon support, sliding indicator, and optional content panels. Keyboard navigable.
npx shadcn@latest add https://pulkit.page/components/tabs.json Changes the page title to a custom message when the user switches away from the tab. Uses the Page Visibility API.
npx shadcn@latest add https://pulkit.page/components/lonely-tab-title.json Image component with Low Quality Image Placeholder (LQIP). Shows a blurred placeholder that fades into the full image on load.
npx shadcn@latest add https://pulkit.page/components/lqip-image.json