Create a Spotify Wrapped-style year-end recap for your team using data from any Airtable base.

• 12 animated slide templates - Beautiful, animated slides showing personalized stats
• 30+ CSS animations - Confetti, sparkles, floating orbs, and more
• Stats calculation engine - Aggregate hours, projects, clients, and more
• Achievement/badge system - Automatically detect milestones and superlatives
• AI-assisted customization - Export your schema and let AI help adapt the code

git clone https://github.com/YOUR_ORG/year-end-wrap.git
cd year-end-wrap
npm install

Want to see the app in action before connecting your data? Enable demo mode to view sample data for a fictional creative agency:

// In frontend/config.js, set:
export const DEMO_MODE = true;

Then run block run to see all 12 slides with realistic sample data. The demo includes a full year of work data for "Alex Rivera" at "Stellar Studios" - complete with clients, collaborators, project leads, and achievements.

# Get a Personal Access Token from https://airtable.com/create/tokens
# (needs schema:bases:read scope)

node scripts/exportSchema.js --baseId=YOUR_BASE_ID --token=YOUR_PAT

This creates schema_output/SCHEMA_SUMMARY.md - a readable summary of your tables and fields.

Share your schema with Claude, Cursor, or another AI coding assistant:

"Here's my Airtable schema. Update frontend/config.js to map my tables and fields for a year-end wrap. My time entries are in the 'Tasks' table with a 'Hours' field."

The AI will help you:

• Update table and field mappings in config.js
• Adapt slide calculations to your data structure
• Customize messaging and badges for your team

block run

Open your Airtable base and add the app to an Interface page.

year-end-wrap/
├── frontend/
│   ├── index.js              # Main app entry point
│   ├── config.js             # Configuration (tables, fields, settings)
│   ├── style.css             # Animations and styling
│   ├── hooks/
│   │   └── useSettings.js    # Custom properties for Airtable config
│   ├── utils/
│   │   ├── colors.js         # Airtable color palette
│   │   ├── dateHelpers.js    # Date parsing and filtering
│   │   ├── statsCalculator.js # Data aggregation
│   │   └── achievementEngine.js # Badge detection
│   ├── components/
│   │   └── shared/           # Reusable UI components
│   └── slides/               # Individual slide components
├── scripts/
│   ├── exportSchema.js       # Export Airtable schema for AI
│   └── exampleStatsProcessor.js # Example data processing
├── docs/
│   ├── AI_ASSISTANT_GUIDE.md # Instructions for AI tools
│   └── CUSTOMIZATION.md      # Customization reference
└── block.json

Edit frontend/config.js to match your Airtable schema:

// Set your recap year
export const RECAP_YEAR = 2025;

// Map your tables
export const TABLE_IDS = {
    entries: 'tblXXXXX',    // Your time entries table
    projects: 'tblXXXXX',   // Projects table
    clients: 'tblXXXXX',    // Clients table
    staff: 'tblXXXXX',      // Staff/team members table
};

// Map your fields
export const FIELD_IDS = {
    entries: {
        assignee: 'fldXXXXX',   // Link to staff
        hours: 'fldXXXXX',      // Hours worked
        endDate: 'fldXXXXX',    // Date field for filtering
        // ... more fields
    },
    // ... more tables
};

Personalized greeting with the user's name, animated word reveal, and ambient floating orbs. Sets the tone for the year-end experience.

Key metrics displayed in a bento grid layout. Shows total hours worked, number of projects, clients served, and team size with animated counters.

Circle-packed bubble visualization showing hours spent across different industries. Larger bubbles = more hours. Hover for project details.

Creative toolkit showcase with animated pill tags. Displays the different types of work/approaches used throughout the year (e.g., Brand Identity, Web Design, Campaign).

Ranked list of top clients with progress bars showing hours invested. Displays project count per client with visual hierarchy.

Team connection visualization showing colleagues you worked with most. Displays shared hours and project count with avatar initials.

Olympic-style podium showing the partners/leads you worked with. Includes hover tooltips with project details and a client POC highlight.

Horizontal stacked bar showing time distribution across Pre-Production, Production, and Post-Production phases with percentage breakdown.

GitHub-style activity heatmap showing daily work throughout the year. Color-coded by work type with hover tooltips for daily details.

Monthly work rhythm bar chart showing hours logged per month. Highlights busiest and slowest periods with visual peaks and valleys.

Personal achievement spotlight featuring earned badges and superlatives. Shows #1 rankings and unique accomplishments with glow effects.

Summary card with celebratory confetti animation. Includes option to export slides as PNG images for sharing.

All animation components can be used in your own slides:

import { Sparkles, AnimatedNumber, WordReveal, GlowText } from './components/shared';

// Sparkle effects
<Sparkles count={20} colors={['#FF6F2C', '#8B46FF']} />

// Animated counters
<AnimatedNumber value={1234} suffix=" hrs" glow />

// Text reveal animation
<WordReveal text="Your Year in Review" delay={300} />

// Glowing emphasis
<GlowText color="#FCB400">2,500 hours</GlowText>

The wrap automatically detects achievements based on stats:

• Marathon Maker - 2000+ hours logged
• Project Hopper - 15+ projects
• Team Player - 25+ collaborators
• Year-End Warrior - Strong November-December finish
• Client Whisperer - 50%+ hours with one client
• And more...

Customize thresholds in utils/achievementEngine.js.

node scripts/exportSchema.js --baseId=appXXXXX --token=patXXXXX

Outputs AI-friendly schema documentation for customization.

# After configuring
node scripts/exampleStatsProcessor.js

Demonstrates data processing patterns for offline analysis.

• Node.js 18+
• Airtable base with time tracking data
• Airtable Blocks CLI (npm install -g @airtable/blocks-cli)

MIT License - See LICENSE for details.

Built with love for year-end celebrations.