# DiMaac UI

> Animated React components and templates from the HankTheTank YouTube builds, by DiMaac. TypeScript, React 19 and Tailwind v4, with light and dark built in. Free components install with the shadcn CLI.

Important notes for agents:
- Install a free component with `npx shadcn@latest add https://ui.dimaac.com/r/<slug>.json`. With `"@dimaac": "https://ui.dimaac.com/r/{name}.json"` under `registries` in components.json it's `npx shadcn@latest add @dimaac/<slug>`. The index is https://ui.dimaac.com/r/registry.json.
- Every component page has a Markdown twin at /components/<slug>.md with the install commands, the props and the full source.
- Pro components (marked Pro below) come with Pro Components, a Templates plan or All-Access (https://ui.dimaac.com/pricing). Their source is not in the .md twins or at any public address: it needs the owner's licence key. Install one from the authenticated registry: add `"@dimaac-pro": { "url": "https://api.dimaac.com/v1/ui/r/{name}.json", "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" } }` under `registries` in components.json, put the key in .env.local as `DIMAAC_LICENSE_KEY=<key>`, then run `npx shadcn@latest add @dimaac-pro/<slug>`. Ask the owner for the key; never print it or commit it. The registry answers 401 without a key, 403 for a key that isn't valid, and 402 for a key whose purchase doesn't include Pro components (see https://ui.dimaac.com/pricing).
- Each item lists the npm packages it imports (gsap, @gsap/react, ...). Install them; the shadcn CLI does it for you.
- Components land in `components/dimaac/<slug>.tsx`. They use Tailwind v4 utility classes, so Tailwind must scan that folder.
- Components fill their parent: give it a size. They respect prefers-reduced-motion; keep that working.
- Templates are zips, not registry items. Free ones download from their page; Pro ones are bought one by one or claimed with a Templates plan, then download from their page or the account. Never try to fetch them from GitHub.

## Components

- [ASCII Reveal](https://ui.dimaac.com/components/ascii-reveal.md): A photo typed out in ASCII that scrambles into the real image. `@dimaac/ascii-reveal`
- [Aurora Background](https://ui.dimaac.com/components/aurora-background.md): Soft colour blobs rising from an edge and drifting behind your content. `@dimaac/aurora-background`
- [3D Card Ring](https://ui.dimaac.com/components/card-ring-3d.md): Photo cards bent around a 3D cylinder that spins with wheel and drag. (Pro: `@dimaac-pro/card-ring-3d`)
- [Clip-Path Slider](https://ui.dimaac.com/components/clip-slider.md): Full-bleed slides that open through a clip-path while the old one zooms back. `@dimaac/clip-slider`
- [Colour Trail](https://ui.dimaac.com/components/colour-trail.md): A greyscale photo the cursor paints back into colour. `@dimaac/colour-trail`
- [Context Menu](https://ui.dimaac.com/components/context-menu.md): A right-click menu that pops open from the cursor. `@dimaac/context-menu`
- [Electric Border](https://ui.dimaac.com/components/electric-border.md): A card edge that crackles like electricity. `@dimaac/electric-border`
- [Expandable Panel](https://ui.dimaac.com/components/expandable-panel.md): Photo strips that open wide on hover, focus or tap. `@dimaac/expandable-panel`
- [Fashion Preloader](https://ui.dimaac.com/components/fashion-preloader.md): Tilted photo cards open one by one, a brand name rises and a counter runs to 100. `@dimaac/fashion-preloader`
- [Film Split Loader](https://ui.dimaac.com/components/film-split-loader.md): Loader words spread apart and a tilted card grows between them into the full-screen picture. `@dimaac/film-split-loader`
- [Flip Book](https://ui.dimaac.com/components/flip-book.md): A hardcover photo book whose pages turn and bend in 3D. (Pro: `@dimaac-pro/flip-book`)
- [Flow Art](https://ui.dimaac.com/components/flow-art.md): Colour-block sections that swing in over each other as you scroll. `@dimaac/flow-art`
- [Folder Hover Tabs](https://ui.dimaac.com/components/folder-hover.md): Service folders that lift and fan three photos open on hover. `@dimaac/folder-hover`
- [Opening Card Row](https://ui.dimaac.com/components/form-cards.md): An acronym preloader, then tall cards that slide across a pinned hero and open. (Pro: `@dimaac-pro/form-cards`)
- [Rotating Image Gallery](https://ui.dimaac.com/components/image-gallery.md): A ring of photos you spin with a drag, a swipe or the arrow keys. `@dimaac/image-gallery`
- [Image Loader](https://ui.dimaac.com/components/image-loader.md): A counter climbs to 100 while photos open in a stack and the last one fills the screen. `@dimaac/image-loader`
- [Images flow](https://ui.dimaac.com/components/images-flow.md): Images spread from the centre into 3D. `@dimaac/images-flow`
- [Infinite Drag Gallery](https://ui.dimaac.com/components/infinite-drag-gallery.md): A wall of work you drag in any direction, forever. (Pro: `@dimaac-pro/infinite-drag-gallery`)
- [Ink Hover Reveal](https://ui.dimaac.com/components/ink-hover.md): A brush stroke of ink pours the colour photo in on hover. `@dimaac/ink-hover`
- [Jelly Spiral Gallery](https://ui.dimaac.com/components/jelly-spiral.md): Photos on a 3D spiral that bend like jelly when you spin it. (Pro: `@dimaac-pro/jelly-spiral`)
- [Lanyard Badge](https://ui.dimaac.com/components/lanyard-badge.md): An ID badge on two straps that you can grab, swing and flick. (Pro: `@dimaac-pro/lanyard-badge`)
- [Line Reveal](https://ui.dimaac.com/components/line-reveal.md): Headings and paragraphs that rise line by line out of a mask. `@dimaac/line-reveal`
- [Liquid image reveal](https://ui.dimaac.com/components/liquid-image-reveal.md): An organic reveal with SVG filters. `@dimaac/liquid-image-reveal`
- [Magnetic Button](https://ui.dimaac.com/components/magnetic-button.md): A button that leans toward the cursor and snaps back like a spring. `@dimaac/magnetic-button`
- [Mask Reveal on Hover](https://ui.dimaac.com/components/mask-reveal-on-hover.md): A round window that follows the cursor and shows different content underneath. `@dimaac/mask-reveal-on-hover`
- [Mouse Tilt Card](https://ui.dimaac.com/components/mouse-tilt-card.md): A card that leans toward the cursor with a moving glare. `@dimaac/mouse-tilt-card`
- [Mouse trail](https://ui.dimaac.com/components/mouse-trail.md): An image trail that follows the cursor. `@dimaac/mouse-trail`
- [Odometer](https://ui.dimaac.com/components/odometer.md): Numbers that roll digit by digit, like an odometer. `@dimaac/odometer`
- [Perspective Card Stack](https://ui.dimaac.com/components/perspective-card-stack.md): A pile of photos that swings open into a 3D fan. `@dimaac/perspective-card-stack`
- [Pin rotate sections](https://ui.dimaac.com/components/pin-rotate-sections.md): Pinned sections that turn in 3D. `@dimaac/pin-rotate-sections`
- [Pixel Hover Reveal](https://ui.dimaac.com/components/pixel-hover-reveal.md): Hover a name and its picture breaks in, pixel by pixel. `@dimaac/pixel-hover-reveal`
- [Portrait Burst](https://ui.dimaac.com/components/portrait-burst.md): Hover a word and a burst of portraits flies out, then tucks back in. `@dimaac/portrait-burst`
- [Post Swiper](https://ui.dimaac.com/components/post-swiper.md): A deck of social posts you swipe through, card by card. `@dimaac/post-swiper`
- [Project hover](https://ui.dimaac.com/components/project-hover-section.md): Thumbnails float with the cursor. `@dimaac/project-hover-section`
- [Proof Of Work](https://ui.dimaac.com/components/proof-of-work.md): A big title over a grid of work that flies in, or tumbles into view, as you scroll. `@dimaac/proof-of-work`
- [Scrolling Gallery](https://ui.dimaac.com/components/scrolling-gallery.md): A zig-zag column of pictures that slide past each other as you scroll. `@dimaac/scrolling-gallery`
- [Section 3D](https://ui.dimaac.com/components/section-3d.md): Tall cards that fall back into 3D as the next one arrives. `@dimaac/section-3d`
- [Settle Text](https://ui.dimaac.com/components/settle-text.md): Headline rows that slide in while their letters drop in and settle. `@dimaac/settle-text`
- [Social Card](https://ui.dimaac.com/components/social-card.md): A realistic post card in three looks: photo feed, short-text timeline and news feed. `@dimaac/social-card`
- [Spotlight Cards](https://ui.dimaac.com/components/spotlight-cards.md): A grid of cards lit by one soft light that follows the cursor. `@dimaac/spotlight-cards`
- [Stack Fly-Out Cards](https://ui.dimaac.com/components/stack-fly-cards.md): Cards rise into a peeking stack, then fly off one by one as you scroll. `@dimaac/stack-fly-cards`
- [Stacked card slider](https://ui.dimaac.com/components/stacked-card-slider.md): Click to cycle cards with GSAP Flip. `@dimaac/stacked-card-slider`
- [Swipeable Cards](https://ui.dimaac.com/components/swipeable-cards.md): A deck of cards you swipe through. `@dimaac/swipeable-cards`
- [Text block effect](https://ui.dimaac.com/components/text-block-effect.md): A coloured block sweeps each line in. `@dimaac/text-block-effect`
- [Text Loader](https://ui.dimaac.com/components/text-loader.md): Letters rise out of a mask, fill with a gradient, leave, and the panel lifts away. `@dimaac/text-loader`
- [Text scramble reveal](https://ui.dimaac.com/components/text-scramble-reveal.md): Letters scramble near the mouse. `@dimaac/text-scramble-reveal`
- [Text to Timeline](https://ui.dimaac.com/components/text-to-timeline.md): Images inside a sentence fly out on scroll and land on an editor timeline. (Pro: `@dimaac-pro/text-to-timeline`)
- [Tilt Menu](https://ui.dimaac.com/components/tilt-menu.md): The page swings aside and tilts to show a full menu behind it. `@dimaac/tilt-menu`
- [Velocity Marquee](https://ui.dimaac.com/components/velocity-marquee.md): A marquee that speeds up, leans and turns around with your scroll. `@dimaac/velocity-marquee`
- [Card Fan](https://ui.dimaac.com/components/card-fan.md): A hand of photo cards that fans out, lifts and turns over. `@dimaac/card-fan`
- [Curved Gallery](https://ui.dimaac.com/components/curved-gallery.md): A WebGL photo strip on a curved screen that bends with speed. (Pro: `@dimaac-pro/curved-gallery`)
- [Dot Globe](https://ui.dimaac.com/components/dot-globe.md): A dotted three.js globe with arcs that fly between cities. (Pro: `@dimaac-pro/dot-globe`)
- [Dynamic Island](https://ui.dimaac.com/components/dynamic-island.md): A black pill that springs between live activities. `@dimaac/dynamic-island`
- [Magnetic Dot Grid](https://ui.dimaac.com/components/magnetic-dot-grid.md): A dot grid that parts around the cursor and springs back. `@dimaac/magnetic-dot-grid`
- [Mesh Gradient](https://ui.dimaac.com/components/mesh-gradient.md): Soft fields of colour that drift, swirl and blend, with fine film grain. `@dimaac/mesh-gradient`
- [Physics Letters](https://ui.dimaac.com/components/physics-letters.md): Huge letters that drop in, bounce, pile up and can be thrown. `@dimaac/physics-letters`
- [Water Ripple](https://ui.dimaac.com/components/water-ripple.md): A photo under live water: the cursor leaves a wake, a click drops a ripple. (Pro: `@dimaac-pro/water-ripple`)

## Docs

- [Installation and AI agents](https://ui.dimaac.com/docs): shadcn setup, the @dimaac namespace, Pro components, the shadcn MCP server, licence notes
- [Registry index](https://ui.dimaac.com/r/registry.json): every free component as shadcn registry JSON

## Templates

- [Templates](https://ui.dimaac.com/templates): full sites from the videos, as zips (not registry items)
- [Atelier Nord](https://ui.dimaac.com/templates/atelier-nord): A creative-studio site for fashion and beauty brands. Next.js 15. (Free)
- [Form & Co](https://ui.dimaac.com/templates/form-and-co): A design-studio portfolio with a custom cursor and editorial reveals. Next.js 14. (Free)
- [Lorea](https://ui.dimaac.com/templates/lorea): A multi-page freelancer portfolio with case studies and a blog. Next.js 15. (Pro: bought on its own or claimed with a plan)
- [Arlo](https://ui.dimaac.com/templates/arlo): A motion-designer portfolio built as a design canvas. Vite 5. (Pro: bought on its own or claimed with a plan)
- [Quiet](https://ui.dimaac.com/templates/minimal): A calm one-column serif developer portfolio. HTML. (Free)
- [Aurora](https://ui.dimaac.com/templates/aurora): A product-engineer portfolio with an aurora footer and a WebGL glow. HTML. (Free)
- [Ember](https://ui.dimaac.com/templates/ember): A warm cream portfolio with a WebGL ember shader. HTML. (Free)
- [Prism](https://ui.dimaac.com/templates/prism): A dark design-engineer portfolio with a spectral WebGL wash. HTML. (Free)
- [Maya](https://ui.dimaac.com/templates/maya): A serif editorial portfolio with hover project previews. HTML. (Free)
- [Terminal](https://ui.dimaac.com/templates/backend): A terminal-style portfolio for backend engineers. HTML. (Free)
- [Altura](https://ui.dimaac.com/templates/altura): A seven-page investment firm site with GSAP scroll fills. HTML. (Pro: bought on its own or claimed with a plan)
- [Lumen](https://ui.dimaac.com/templates/lumen): A WebGL gallery exhibition with a scroll-driven 3D artwork rail. HTML + three.js. (Pro: bought on its own or claimed with a plan)
- [Overclock](https://ui.dimaac.com/templates/overclock): An indie-hacker landing page with GSAP scroll choreography. HTML. (Pro: bought on its own or claimed with a plan)
- [Studio](https://ui.dimaac.com/templates/phantom-sphere): A creative-studio portfolio around an interactive 3D project sphere. HTML + three.js. (Pro: bought on its own or claimed with a plan)
- [Versant](https://ui.dimaac.com/templates/versant): An architecture-studio site with pinned work cards and halftone WebGL. Next.js 16. (Pro: bought on its own or claimed with a plan)
- [Mara Vance](https://ui.dimaac.com/templates/portfolio-landing): A designer portfolio landing with a WebGL hero scene. HTML. (Free)
- [Veldt](https://ui.dimaac.com/templates/veldt-folio): A Vite portfolio with a 3D helix gallery. Vite 6. (Free)
- [Étude](https://ui.dimaac.com/templates/etude): A Next.js and R3F portfolio with a scroll-synced WebGL gallery. Next.js 15 + R3F. (Pro: bought on its own or claimed with a plan)
- [Pricing](https://ui.dimaac.com/pricing): Pro Components once, Pro templates one by one, Templates Monthly or Yearly, All-Access

## Optional

- [Full text](https://ui.dimaac.com/llms-full.txt): every component page in one file
- [This file](https://ui.dimaac.com/llms.txt)