Portfolio Preloader with Skeleton Key

Portfolio preloader where a typographic collage assembles itself while the page loads: the first letter prints pixel by pixel, a monogram draws stroke by stroke, a tag pill and ink swoosh drop in, a handwritten version counts up, and at 100 a gilded skeleton key turns in a keyhole and the camera dives through to the page. Grab and throw the key while it loads. Your name, words and colours, honours reduced motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Portfolio Preloader with Skeleton Key to your project and fits it to your theme.

"use client"

import SkeletonKeyPreloader from "@/components/ui/skeleton-key-preloader"

// Ink on black with a silver key and a 2.0 release.
export default function DemoNoir() {
  return (
    <SkeletonKeyPreloader
      loop
      paper="#0e0e0f"
      ink="#f1eee8"
      metal="silver"
      tags={["#kedhar", "#noir", "#motion"]}
      release="2.0"
      durationMs={5400}
    />
  )
}