Skip to content

Component 045Portfolio

ID Badge Hero

A conference-style ID badge swings on its lanyard beside your introduction; drag it to play and flip it to reveal your skills.

  • React
  • Tailwind CSS
  • TypeScript
Drag the badge and let go to watch it swing, or click or press Enter to flip it.
Loading preview…
Live interactive preview

Quick start

Make it yours.

Save id-badge-hero.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx
import IdBadgeHero from "@/components/ui/id-badge-hero";

export default function HomePage() {
  return <IdBadgeHero />;
}

Behind the interaction

The details that make it work.

Designed to explore, ready to adapt.

A badge with weight

A spring-driven lanyard sways on its own, follows your drag, and settles with a natural swing.

Two sides of you

The front shows your photo, name, and role; flip it to reveal skills and availability.

Ready for your portfolio

Typed props for profile, skills, and actions, plus keyboard flipping and reduced-motion support.

Keep exploring

More from the lab.

View all components
Portfolio / 047

Skill Orbit Hero

Your portrait sits at the center of two slow orbits while skills and highlights circle around it, pausing when visitors look closer.

Portfolio / 046

Code Profile Hero

A code editor types out a developer profile object while a live card assembles itself beside it, line by line.