Huxxle Recap 25’ — Animated Story Experience

This project is the foundation for the Huxxle Recap 25’ experience — an animated, story-driven annual recap inspired by platforms like Spotify Wrapped, Instagram Stories, and WhatsApp Status.

The goal is to generate a cinematic, mobile-first highlight reel for Huxxle businesses, using smooth transitions, animated text, kinetic backgrounds, and playful Nigerian-centric copy.

🎬 Project Overview

This React application sets up:

• A mobile-sized story container (390×844)
• Multi-step story navigation with animated progress bars
• Slide-to-slide transitions using Framer Motion
• Foundation components for:
  • Animated text reveals
  • Drifting decorative frames
  • Background gradients
  • Metric-focused recap slides

The UI and animation patterns closely follow the Figma design direction for Huxxle Recap 25’.

🛠️ Tech Stack

• React
• Vite (or CRA, depending on your setup)
• Framer Motion — animations & transitions
• CSS for layout, gradient system, and component styling

📦 Installation

Option 1: Use as an NPM package (WebApp/Backend)

npm install @katajere/recap

Basic usage:

import { RecapApp, mockRecapData } from '@katajere/recap';
import '@katajere/recap/styles';

export function RecapPage() {
  return <RecapApp recapData={mockRecapData} />;
}

Option 2: Run standalone (full app shell)

git clone https://github.com/Katajere/Recap.git
cd Recap
npm install
npm run dev       # Vite dev server at http://localhost:3000

# Production builds
npm run build     # builds library (dist/) + standalone (build/)
npm run preview   # preview production build