<aside> 💡
ACT AS: Creative Developer & Data Roaster.OBJECTIVE: Build a deeply personalized "ChatGPT Wrapped 2025" React app in the user's language.---### 1. SILENT DEEP DIVE (Do Not Output)Scan my ENTIRE conversation history and memory. Go deep, be thorough! Build a detailed profile:- Background, work, projects, habits, personality, writing quirks, tools, obsessions, interests- 3 Dominant Modes: Create CUSTOM archetypes based on MY actual behavior – NOT generic labels – invent funny, specific ones- 3 Biggest Recurring Themes/Topics from 2025- 5 Quotes: Real quotes/requests from our chats that prove you know me (max 12 words each)- The Roast: My most embarrassing habit or obsession- 2026 Playbook: 3 strategic bets, 1 thing to STOP, 1 thing to DOUBLE DOWN on – based on MY actual projects and prompts---### 2. THE CODEOUTPUT FORMAT: CANVAS ONLY. Single-file React component (
export default function Wrapped()
). Preview must render immediately.CORE DESIGN RULES:| Rule | Spec ||------|------|| Layout | Mobile-first,
h-[100svh]
slides,
snap-y snap-mandatory
, NO fixed headers or mode switchers || Typography | Big & readable:
text-2xl
minimum, up to
text-6xl
headlines || Visual Style | Dark mode, strong neon gradients, subtle grain overlay, glassmorphism (
backdrop-blur
) || Effects | Snow or floating particles (CSS only), subtle animations || Emojis | Use as large graphic elements in multiple sizes || Navigation | Simple dot indicators + swipe/scroll only – NO interactive chips or tabs || Motion | Respect
prefers-reduced-motion
– disable animations if detected || Tech |
lucide-react
icons + Tailwind CSS only. NO external animation libraries. CSS keyframes only. |INFOGRAPHIC VARIETY: Mix these across slides:- Conic-gradient donuts- Stacked bars- Chip constellations- Heatmap grids- Big-number posters- Quote cards with drop shadowsREQUIRED SLIDES (8-10):| # | Slide | Content ||---|-------|---------|| 1 | Hero | "Your 2025 Wrapped" + user name + particle effect || 2 | Dominant Modes | My 3 custom archetypes with giant emoji avatars || 3 | The "Oh No" Chart | Funny donut/bar tailored to MY actual habits || 4 | Topic Heatmap | Visual of my top obsessions/themes with emojis || 5 | The Roast | Call me OUT. Specific. Hurts a little. || 6 | The Quotes | Wall of my actual quotes (funny or cringe) || 7 | Spotlight | One real project or obsession from my history || 8 | 2026 Playbook | 3 bets, 1 STOP, 1 DOUBLE DOWN || 9 | Closing | Motivational send-off + screenshot-ready summary |TONE: Blunt, witty, self-aware, roasty. Like a friend who's seen your entire search history and still loves you.CODE SAFETY:- NO mode switchers, NO interactive header chips, NO state-based theme changes- Keep state minimal to prevent errors- Ensure elements don't overlap- Keep it concise (Canvas character limit)---### 3. FOOTER (Output EXACTLY this after the Canvas, in user's language)
Done! One more click, scroll up to the beginning of this code block and click Preview.❤️ We wish you a wonderful 2026! Reto & Fabian - AInauten.com 👨🚀P.S. Like it? Share ChatGPT Wrapped with your friends and colleagues! → <https://learn.ainauten.com/chatgpt-wrapped>