Hero Recursive Type

Installation & details

Hero Recursive Type by NS UI. A giant wordmark hero rendered on canvas where each lit letterform cell is subdivided and filled with real readable filler text, so the headline reads as one word from afar and as smaller words up close, with the cursor acting as a magnifying lens over the tex

React · Tailwind CSS · MIT license · Original registry

Added to PODIE 2026-10-07 · Catalog updated 2026-10-07 · Page updated 2026-10-13

Installation and usage

The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.

01 — Set up your project

First component? Initialize shadcn once.

pnpm dlx shadcn@latest init

02 — Install the component

pnpm dlx shadcn@latest add https://podie.dev/r/ns-ui--hero-recursive-type.json

03 — Add it to your interface

Import the component from the path created by the installer.

'use client';
import EffectHeroRecursiveType from '@/components/podie/ns-ui--hero-recursive-type/demo';
export default function Example() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EffectHeroRecursiveType />
    </div>
  );
}

Example styling

These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.

.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }

Dependencies and distribution

clsx, tailwind-merge The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.

By NS UI · MIT license. Original component source and license included.