Envelope Animation

A multi-stage Framer Motion animation that opens an envelope to reveal a portfolio book — envelope seal, 3D rotation, flap opening, and a paginated book view.

EnvelopeAnimation plays a choreographed five-stage sequence: envelope → rotate → zoom → open → book. The book view shows a three-page portfolio spread with experience, skills, and project highlights. Accepts a data prop so all content is injected externally — no app-specific data dependency.

SSR note — This component uses Framer Motion heavy animations. Load it with dynamic(() => import(...), { ssr: false }).

Installation

npx shadcn@latest add @adv/envelope-animation

Usage

import dynamic from 'next/dynamic';
import type { EnvelopeData } from '@/components/envelope-animation';

const EnvelopeAnimation = dynamic(
  () => import('@/components/envelope-animation'),
  { ssr: false }
);

const data: EnvelopeData = {
  personal: {
    name: 'Jane Designer',
    title: 'Product Designer',
    location: 'San Francisco',
    intro: 'Crafting thoughtful digital experiences.',
    contact: { email: 'jane@example.com', phone: '', linkedin: '' },
  },
  experience: [{ title: 'Senior Designer', company: 'Acme', period: '2021–now' }],
  skills: { design: ['Figma'], prototyping: 'Framer', research: 'Interviews', extras: '' },
  workItems: [{ title: 'Platform', description: 'Redesign' }],
  portfolio: [{ title: 'Checkout', description: '+23%', tags: ['UX'], image: '/cover.svg' }],
};

<EnvelopeAnimation data={data} onComplete={() => console.log('done')} />

Example

Props

Prop	Type	Default	Description
`onComplete`	`() => void`	—	Required. Called when the full animation sequence completes.
`data`	`EnvelopeData`	sample data	Portfolio data to display. Falls back to built-in sample data if omitted.

EnvelopeData

Field	Type	Description
`personal`	`EnvelopePersonal`	Name, title, location, intro, and contact details.
`experience`	`EnvelopeExperience[]`	Work history (title, company, period, description, achievements).
`skills`	`EnvelopeSkills`	Design, prototyping, research, extras strings.
`workItems`	`EnvelopeWorkItem[]`	Notable projects (title, description).
`portfolio`	`EnvelopePortfolioItem[]`	Portfolio highlights with optional image and tags.
`philosophy`	`string?`	Optional design philosophy quote.