Nexus UI

Tilt Pass, animated React component

A membership pass that tilts towards the pointer with a moving glare and holographic sheen, casts a shadow that shifts with it, and flips over to a scannable back on click.

  • Free
  • 3D Components
  • Hover
  • 3D
  • Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

MemberFounders Pass
Alex RiveraNo. 0042
Scan at entryAlex RiveraNo. 0042
Move your pointer over it. Click to flip.

Props

PropTypeDefaultWhat it does
titlestring"Founders Pass"Pass name on the front.
namestring"Alex Rivera"Holder's name, front and back.
numberstring"No. 0042"Membership number.
autoplaybooleanfalseFloats gently on its own while the pointer is away.

Add it to your project

  1. 1

    Prepare your project

    You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

    npx shadcn@latest init

    Then add the Nexus registry to your components.json (the registries key is the part that matters):

    {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}
  2. 2

    Add the component

    Run this from your project root. It adds the component, the utilities it uses and its packages.

    npx shadcn@latest add @nexus-labs/tilt-pass
  3. 3

    Check what was added

    With the standard aliases, these files land in your project:

    components/
    tilt-pass/
    index.ts
    tilt-pass.tsx
  4. 4

    Copying by hand? Install the packages

    Skip this if you used the command above.

    npm install framer-motion
  5. 5

    Use it in a page

    Import it and render it. The Code tab above has the full example.

    // app/page.tsx
import { TiltPass } from "@/components/tilt-pass";

export default function Page() {
  return (
    <main>
      <TiltPass />
    </main>
  );
}

More 3d components