Initial commit

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+.pnpm-store
+.turbo
+.next
+out
+dist
+.git
+.gitignore
+.env*
+Dockerfile

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = true

.env.local.example

@@ -0,0 +1,11 @@
+# Nothing is required for now.
+
+# Pending: enable HF dataset creation/writes when blockers are cleared.
+# HF_TOKEN=
+# WRAPPED_DATASET_ID=
+# WRAPPED_DATASET_WRITE=true
+
+# Optional local defaults (uncomment if you need them)
+# NEXT_PUBLIC_SITE_URL="http://localhost:3000"
+# NEXT_PUBLIC_WRAPPED_DEFAULT_HANDLE=""
+# NEXT_PUBLIC_WRAPPED_DEFAULT_SUBJECT_TYPE="auto"

.gitattributes

@@ -0,0 +1,6 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text

.github/dependabot.yml

@@ -0,0 +1,15 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    open-pull-requests-limit: 2
+    schedule:
+      interval: "daily"
+    ignore:
+      - dependency-name: "cropperjs"
+        versions: [">1.6.2"]
+    groups:
+      production-dependencies:
+        dependency-type: "production"
+      development-dependencies:
+        dependency-type: "development"

.github/workflows/validate-prs.yml

@@ -0,0 +1,41 @@
+name: Validate PRs
+
+on:
+  pull_request:
+    branches: [main]
+
+env:
+  DATABASE_URL: ${{ secrets.DATABASE_URL }}
+
+jobs:
+  lint:
+    name: Lint code
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+      - name: Run Biome
+        run: biome ci .
+  e2e:
+    name: Run e2e tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - uses: pnpm/action-setup@v4
+      - name: Install dependencies
+        run: pnpm install && pnpm --filter database generate
+      - name: Run Playwright tests
+        run: pnpm --filter web e2e:ci
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: apps/web/playwright-report/
+          retention-days: 30

.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+.swc/
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# ui
+dist/
+
+# typescript
+*.tsbuildinfo
+
+# other 
+.react-email/
+.content-collections/
+.prisma-zod-generator-manifest.json

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*prisma*

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	"recommendations": [
+		"lokalise.i18n-ally",
+		"bradlc.vscode-tailwindcss",
+		"biomejs.biome"
+	]
+}

.vscode/settings.json

@@ -0,0 +1,31 @@
+{
+	"editor.defaultFormatter": "biomejs.biome",
+	"editor.formatOnSave": true,
+	"editor.formatOnPaste": true,
+	"tailwindCSS.experimental.classRegex": [
+		["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+	],
+	"editor.codeActionsOnSave": {
+		"source.fixAll.biome": "explicit",
+		"source.organizeImports.biome": "explicit"
+	},
+	"typescript.preferences.importModuleSpecifier": "non-relative",
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"i18n-ally.localesPaths": ["packages/i18n/translations"],
+	"i18n-ally.keystyle": "nested",
+	"i18n-ally.enabledFrameworks": ["next-intl"],
+	"i18n-ally.keysInUse": ["mail.organizationInvitation.headline"],
+	"i18n-ally.tabStyle": "tab",
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[json]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[prisma]": {
+		"editor.defaultFormatter": "Prisma.prisma"
+	}
+}

Dockerfile

@@ -0,0 +1,38 @@
+FROM node:20-alpine
+
+ENV NODE_ENV=production
+WORKDIR /app
+
+# Install pnpm
+RUN npm install -g [email protected]
+
+# Copy lockfiles and workspace manifests for better install caching
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml turbo.json tsconfig.json .npmrc* ./
+COPY apps/web/package.json apps/web/package.json
+COPY packages/wrapped/package.json packages/wrapped/package.json
+COPY packages/utils/package.json packages/utils/package.json
+COPY packages/i18n/package.json packages/i18n/package.json
+COPY config/package.json config/package.json
+COPY tooling/typescript/package.json tooling/typescript/package.json
+COPY tooling/tailwind/package.json tooling/tailwind/package.json
+COPY tooling/scripts/package.json tooling/scripts/package.json
+COPY apps/web/tsconfig.json apps/web/tsconfig.json
+COPY packages/wrapped/tsconfig.json packages/wrapped/tsconfig.json
+COPY packages/utils/tsconfig.json packages/utils/tsconfig.json
+COPY packages/i18n/tsconfig.json packages/i18n/tsconfig.json
+COPY config/tsconfig.json config/tsconfig.json
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Copy the rest of the monorepo
+COPY . .
+
+# Build only the web app
+RUN pnpm turbo run build --filter @repo/web
+
+# Hugging Face Spaces expects the app on port 7860
+EXPOSE 7860
+
+# Run Next on the expected host/port from the web app directory.
+CMD ["sh", "-c", "cd apps/web && PORT=${PORT:-7860} HOSTNAME=0.0.0.0 pnpm start --hostname 0.0.0.0 --port ${PORT:-7860}"]

README.md

@@ -0,0 +1,13 @@
+---
+title: hf-wrapped
+emoji: 🤗
+colorFrom: yellow
+colorTo: blue
+sdk: docker
+pinned: false
+app_port: 7860
+---
+
+# hf-wrapped
+
+Hugging Face Wrapped 2025 — Docker Space deployment.

apps/web/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/playwright-report
+/test-results
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.content-collections

apps/web/app/(marketing)/[locale]/(home)/page.tsx

@@ -0,0 +1,25 @@
+import { Hero } from "@marketing/home/components/Hero";
+import { setRequestLocale } from "next-intl/server";
+
+export default async function Home({
+	params,
+}: {
+	params: Promise<{ locale: string }>;
+}) {
+	const { locale } = await params;
+	setRequestLocale(locale);
+
+	return (
+		<div className="flex min-h-screen flex-col overflow-hidden bg-background">
+			<Hero />
+			<style>
+				{`
+					nav[data-test="navigation"],
+					footer {
+						display: none !important;
+					}
+				`}
+			</style>
+		</div>
+	);
+}

apps/web/app/(marketing)/[locale]/[...rest]/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation";
+
+export default function CatchAll() {
+	notFound();
+}

apps/web/app/(marketing)/[locale]/layout.tsx

@@ -0,0 +1,39 @@
+import { Footer } from "@marketing/shared/components/Footer";
+import { NavBar } from "@marketing/shared/components/NavBar";
+import { config } from "@repo/config";
+import { Document } from "@shared/components/Document";
+import { notFound } from "next/navigation";
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages, setRequestLocale } from "next-intl/server";
+import type { PropsWithChildren } from "react";
+
+const locales = Object.keys(config.i18n.locales);
+
+export function generateStaticParams() {
+	return locales.map((locale) => ({ locale }));
+}
+
+export default async function MarketingLayout({
+	children,
+	params,
+}: PropsWithChildren<{ params: Promise<{ locale: string }> }>) {
+	const { locale } = await params;
+
+	setRequestLocale(locale);
+
+	if (!locales.includes(locale as any)) {
+		notFound();
+	}
+
+	const messages = await getMessages();
+
+	return (
+		<Document locale={locale}>
+			<NextIntlClientProvider locale={locale} messages={messages}>
+				<NavBar />
+				<main className="min-h-[calc(100vh-64px)]">{children}</main>
+				<Footer />
+			</NextIntlClientProvider>
+		</Document>
+	);
+}

apps/web/app/(marketing)/[locale]/not-found.tsx

@@ -0,0 +1,5 @@
+import { NotFound } from "@marketing/shared/components/NotFound";
+
+export default async function NotFoundPage() {
+	return <NotFound />;
+}

apps/web/app/api/wrapped/route.ts

@@ -0,0 +1,76 @@
+import { generateWrapped } from "@repo/wrapped";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const requestSchema = z.object({
+	handle: z.string().trim().min(2).max(80),
+	subjectType: z.enum(["user", "organization", "auto"]).optional(),
+	year: z.number().int().min(2000).max(2100).optional(),
+	allowRefresh: z.boolean().optional(),
+});
+
+const rateLimitEnabled = process.env.WRAPPED_RATE_LIMIT_ENABLED === "true";
+const windowMs =
+	Number.parseInt(process.env.WRAPPED_RATE_LIMIT_WINDOW_MS ?? "60000", 10) ||
+	60000;
+const maxRequests =
+	Number.parseInt(process.env.WRAPPED_RATE_LIMIT_MAX ?? "30", 10) || 30;
+const hits = new Map<string, number[]>();
+
+function track(ip: string) {
+	const now = Date.now();
+	const entries =
+		hits.get(ip)?.filter((timestamp) => now - timestamp < windowMs) ?? [];
+	entries.push(now);
+	hits.set(ip, entries);
+	return entries.length;
+}
+
+export async function POST(req: Request) {
+	const ip =
+		req.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ??
+		req.headers.get("x-real-ip") ??
+		"unknown";
+
+	if (rateLimitEnabled && track(ip) > maxRequests) {
+		return NextResponse.json(
+			{ error: "Rate limit exceeded" },
+			{ status: 429 },
+		);
+	}
+
+	let body: unknown;
+	try {
+		body = await req.json();
+	} catch {
+		return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+	}
+
+	const parsed = requestSchema.safeParse(body);
+	if (!parsed.success) {
+		return NextResponse.json(
+			{ error: "Invalid input", details: parsed.error.format() },
+			{ status: 400 },
+		);
+	}
+
+	const payload = parsed.data;
+	const year = payload.year ?? new Date().getUTCFullYear();
+
+	try {
+		const result = await generateWrapped({
+			...payload,
+			year,
+		});
+		return NextResponse.json(result, { status: 200 });
+	} catch (error) {
+		console.error("Wrapped generation failed:", error);
+		const message =
+			(error as Error).message ?? "Failed to generate wrapped";
+		// If handle is not found, return 404 for clarity
+		if (message.toLowerCase().includes("handle not found")) {
+			return NextResponse.json({ error: message }, { status: 404 });
+		}
+		return NextResponse.json({ error: message }, { status: 500 });
+	}
+}

apps/web/app/globals.css

@@ -0,0 +1,67 @@
+@import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+@import "@repo/tailwind-config/theme.css";
+@import "@repo/tailwind-config/tailwind-animate.css";
+
+@source "../node_modules/fumadocs-ui/dist/**/*.js";
+
+@variant dark (&:where(.dark, .dark *));
+
+/* Basement scrollytelling demo fonts */
+@font-face {
+	font-family: "BasementGrotesque";
+	src:
+		url("/scrolly-assets/fonts/BasementGrotesque-Regular.woff2")
+			format("woff2"),
+		url("/scrolly-assets/fonts/BasementGrotesque-Regular.woff2")
+			format("woff2");
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "BasementGrotesque";
+	src:
+		url("/scrolly-assets/fonts/BasementGrotesque-Black.woff2")
+			format("woff2"),
+		url("/scrolly-assets/fonts/BasementGrotesque-BlackExpanded.woff2")
+			format("woff2");
+	font-style: normal;
+	font-weight: 900;
+	font-display: swap;
+}
+
+pre.shiki {
+	@apply mb-4 rounded-lg p-6;
+}
+
+#nd-sidebar {
+	@apply bg-card! top-[4.5rem] md:h-[calc(100dvh-4.5rem)]!;
+
+	button[data-search-full] {
+		@apply bg-transparent;
+	}
+}
+
+#nd-page .prose {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		a {
+			@apply no-underline!;
+		}
+	}
+}
+
+div[role="tablist"].bg-secondary {
+	@apply bg-muted!;
+}
+
+input[cmdk-input] {
+	@apply border-none focus-visible:ring-0;
+}

apps/web/app/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import type { PropsWithChildren } from "react";
+import "./globals.css";
+import { config } from "@repo/config";
+
+export const metadata: Metadata = {
+	title: {
+		absolute: config.appName,
+		default: config.appName,
+		template: `%s | ${config.appName}`,
+	},
+};
+
+export default function RootLayout({ children }: PropsWithChildren) {
+	return children;
+}

apps/web/app/robots.ts

@@ -0,0 +1,10 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+	return {
+		rules: {
+			userAgent: "*",
+			allow: "/",
+		},
+	};
+}

apps/web/app/sitemap.ts

@@ -0,0 +1,15 @@
+import { config } from "@repo/config";
+import { getBaseUrl } from "@repo/utils";
+import type { MetadataRoute } from "next";
+
+const baseUrl = getBaseUrl();
+const locales = config.i18n.enabled
+	? Object.keys(config.i18n.locales)
+	: [config.i18n.defaultLocale];
+
+export default function sitemap(): MetadataRoute.Sitemap {
+	return locales.map((locale) => ({
+		url: new URL(`/${locale}`, baseUrl).href,
+		lastModified: new Date(),
+	}));
+}

apps/web/biome.json

@@ -0,0 +1,20 @@
+{
+	"root": false,
+	"extends": "//",
+	"linter": {
+		"rules": {
+			"style": {
+				"noParameterAssign": "error",
+				"useAsConstAssertion": "error",
+				"useDefaultParameterLast": "error",
+				"useEnumInitializers": "error",
+				"useSelfClosingElements": "error",
+				"useSingleVarDeclarator": "error",
+				"noUnusedTemplateLiteral": "error",
+				"useNumberNamespace": "error",
+				"noInferrableTypes": "error",
+				"noUselessElse": "error"
+			}
+		}
+	}
+}

apps/web/components.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": true,
+	"tsx": true,
+	"tailwind": {
+		"css": "styles/globals.css",
+		"baseColor": "slate",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@ui/components",
+		"utils": "@ui/lib",
+		"ui": "@ui/components"
+	}
+}

apps/web/global.d.ts

@@ -0,0 +1,16 @@
+import type { Messages } from "@repo/i18n";
+import type { JSX as Jsx } from "react/jsx-runtime";
+
+// temporary fix for mdx types
+// TODO: remove once mdx has fully compatibility with react 19
+declare global {
+	namespace JSX {
+		type ElementClass = Jsx.ElementClass;
+		type Element = Jsx.Element;
+		type IntrinsicElements = Jsx.IntrinsicElements;
+	}
+}
+
+declare global {
+	interface IntlMessages extends Messages {}
+}

apps/web/modules/i18n/lib/locale-cookie.ts

@@ -0,0 +1,14 @@
+import "server-only";
+
+import { config } from "@repo/config";
+import type { Locale } from "@repo/i18n";
+import { cookies } from "next/headers";
+
+export async function getUserLocale() {
+	const cookie = (await cookies()).get(config.i18n.localeCookieName);
+	return cookie?.value ?? config.i18n.defaultLocale;
+}
+
+export async function setLocaleCookie(locale: Locale) {
+	(await cookies()).set(config.i18n.localeCookieName, locale);
+}

apps/web/modules/i18n/lib/update-locale.ts

@@ -0,0 +1,10 @@
+"use server";
+
+import { setLocaleCookie } from "@i18n/lib/locale-cookie";
+import type { Locale } from "@repo/i18n";
+import { revalidatePath } from "next/cache";
+
+export async function updateLocale(locale: Locale) {
+	await setLocaleCookie(locale);
+	revalidatePath("/");
+}

apps/web/modules/i18n/request.ts

@@ -0,0 +1,22 @@
+import { getUserLocale } from "@i18n/lib/locale-cookie";
+import { routing } from "@i18n/routing";
+import { config } from "@repo/config";
+import { getMessagesForLocale } from "@repo/i18n";
+import { getRequestConfig } from "next-intl/server";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+	let locale = await requestLocale;
+
+	if (!locale) {
+		locale = await getUserLocale();
+	}
+
+	if (!(routing.locales.includes(locale) && config.i18n.enabled)) {
+		locale = routing.defaultLocale;
+	}
+
+	return {
+		locale,
+		messages: await getMessagesForLocale(locale),
+	};
+});

apps/web/modules/i18n/routing.ts

@@ -0,0 +1,20 @@
+import { config } from "@repo/config";
+import { createNavigation } from "next-intl/navigation";
+import { defineRouting } from "next-intl/routing";
+
+export const routing = defineRouting({
+	locales: Object.keys(config.i18n.locales),
+	defaultLocale: config.i18n.defaultLocale,
+	localeCookie: {
+		name: config.i18n.localeCookieName,
+	},
+	localePrefix: config.i18n.enabled ? "always" : "never",
+	localeDetection: config.i18n.enabled,
+});
+
+export const {
+	Link: LocaleLink,
+	redirect: localeRedirect,
+	usePathname: useLocalePathname,
+	useRouter: useLocaleRouter,
+} = createNavigation(routing);

apps/web/modules/marketing/home/components/Hero.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import type { WrappedResult } from "@repo/wrapped";
+import { Button } from "@ui/components/button";
+import { Input } from "@ui/components/input";
+import gsap from "gsap";
+import { ArrowRightIcon, GithubIcon, Loader2Icon } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useRef, useState, useTransition } from "react";
+import { toast } from "sonner";
+import { StoryScroller } from "./StoryScroller";
+
+const defaultHandle = process.env.NEXT_PUBLIC_WRAPPED_DEFAULT_HANDLE ?? "";
+const defaultSubjectType =
+	process.env.NEXT_PUBLIC_WRAPPED_DEFAULT_SUBJECT_TYPE ?? "auto";
+
+const demoWrapped: WrappedResult = {
+	profile: {
+		handle: "hf-demo",
+		displayName: "HF Demo",
+		subjectType: "user",
+	},
+	year: 2025,
+	activity: {
+		models: [],
+		datasets: [],
+		spaces: [],
+		papers: [],
+		totalDownloads: 120_000,
+		totalLikes: 800,
+		totalRepos: 6,
+		topTags: ["text-generation", "vision", "audio"],
+		busiestMonth: "June",
+	},
+	archetype: "Model Maestro",
+	badges: ["Top 1M+ downloads", "Community favorite", "Peak month: June"],
+	slides: [
+		{
+			id: "intro",
+			kind: "intro",
+			title: "Your 2025 Hugging Face Wrapped",
+			subtitle: "hf-demo",
+			metrics: [
+				{ label: "Repositories", value: "6", accent: "primary" },
+				{ label: "Downloads", value: "120k" },
+			],
+			highlights: ["text-generation", "vision", "audio"],
+		},
+		{
+			id: "models",
+			kind: "models",
+			title: "Top models",
+			subtitle: "Most downloaded",
+			metrics: [
+				{ label: "hf-demo/sdxl", value: "55k downloads" },
+				{ label: "hf-demo/tts", value: "38k downloads" },
+			],
+		},
+		{
+			id: "archetype",
+			kind: "archetype",
+			title: "Archetype",
+			subtitle: "Model Maestro",
+			metrics: [
+				{ label: "Likes", value: "800" },
+				{ label: "Busiest month", value: "June" },
+			],
+			highlights: ["Community favorite", "Peak month: June"],
+		},
+	],
+	cached: false,
+	generatedAt: new Date().toISOString(),
+	source: "live",
+};
+
+export function Hero() {
+	const [handle, setHandle] = useState(defaultHandle);
+	const [wrapped, setWrapped] = useState<WrappedResult>(demoWrapped);
+	const [isPending, startTransition] = useTransition();
+	const [hasSubmitted, setHasSubmitted] = useState(false);
+	const heroRef = useRef<HTMLDivElement | null>(null);
+	const panelRef = useRef<HTMLDivElement | null>(null);
+
+	useGSAP(() => {
+		if (heroRef.current) {
+			gsap.to(heroRef.current, {
+				backgroundPosition: "110% 90%",
+				scale: 1.005,
+				duration: 14,
+				repeat: -1,
+				yoyo: true,
+				ease: "sine.inOut",
+			});
+		}
+		if (panelRef.current) {
+			gsap.from(panelRef.current, {
+				opacity: 0,
+				y: 30,
+				scale: 0.98,
+				duration: 0.6,
+				ease: "power3.out",
+			});
+		}
+	});
+
+	async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		if (!handle.trim()) {
+			toast.error("Enter a Hugging Face handle to generate the story.");
+			return;
+		}
+
+		startTransition(async () => {
+			try {
+				const response = await fetch("/api/wrapped", {
+					method: "POST",
+					body: JSON.stringify({
+						handle: handle.trim(),
+						year: 2025,
+						subjectType: "auto",
+						allowRefresh: true,
+					}),
+				});
+
+				const payload = (await response.json()) as
+					| { error?: string }
+					| WrappedResult;
+
+				if (!response.ok || "error" in payload) {
+					throw new Error(
+						(payload as { error?: string }).error ??
+							"Failed to generate wrapped",
+					);
+				}
+
+				setWrapped(payload as WrappedResult);
+				setHasSubmitted(true);
+			} catch (error) {
+				toast.error((error as Error).message);
+			}
+		});
+	}
+
+	useEffect(() => {
+		if (!defaultHandle) {
+			return;
+		}
+		startTransition(async () => {
+			try {
+				const response = await fetch("/api/wrapped", {
+					method: "POST",
+					body: JSON.stringify({
+						handle: defaultHandle,
+						year: 2025,
+						subjectType: defaultSubjectType,
+						allowRefresh: false,
+					}),
+				});
+				const payload = (await response.json()) as
+					| { error?: string }
+					| WrappedResult;
+				if (!response.ok || "error" in payload) {
+					return;
+				}
+				setWrapped(payload as WrappedResult);
+			} catch {
+				// ignore prefetch errors
+			}
+		});
+	}, []);
+
+	return (
+		<section
+			ref={heroRef}
+			className="relative flex min-h-screen flex-col items-center justify-center bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.10),transparent_30%),radial-gradient(circle_at_80%_0%,rgba(236,72,153,0.10),transparent_30%),linear-gradient(135deg,rgba(15,23,42,0.94),rgba(15,23,42,0.98))] bg-size-[200%_200%] px-4 py-10"
+			id="generator"
+		>
+			<div
+				ref={panelRef}
+				className={`relative z-10 w-full ${
+					hasSubmitted
+						? "max-w-none"
+						: "max-w-[560px] md:max-w-[720px]"
+				}`}
+			>
+				{!hasSubmitted ? (
+					<form
+						onSubmit={onSubmit}
+						className="flex flex-col gap-7 rounded-3xl border border-primary/15 bg-card/85 p-8 shadow-[0_30px_80px_-40px_rgba(59,130,246,0.65)] backdrop-blur transition duration-500 hover:shadow-[0_30px_90px_-35px_rgba(59,130,246,0.85)]"
+					>
+						<div className="flex flex-col items-center gap-3 text-center">
+							<h1 className="flex flex-wrap items-center justify-center gap-3 text-3xl font-bold text-foreground md:text-4xl">
+								<span>Your 2025 in</span>
+								<Image
+									src="/images/huggies/hf-logo-with-white-title.png"
+									alt="Hugging Face"
+									width={220}
+									height={60}
+									className="h-10 w-auto drop-shadow-[0_8px_25px_rgba(0,0,0,0.35)] md:h-12"
+									priority
+								/>
+							</h1>
+							<p className="text-foreground/70 text-sm md:text-base">
+								Drop your username. Watch 2025 unfold.
+							</p>
+							<Button
+								asChild
+								variant="outline"
+								size="sm"
+								className="mt-2"
+							>
+								<a
+									href="https://github.com/mcdaqc/hf-wrapped/"
+									target="_blank"
+									rel="noreferrer"
+									className="flex items-center gap-2"
+								>
+									<GithubIcon className="size-4" />
+									View on GitHub
+								</a>
+							</Button>
+						</div>
+						<div className="space-y-2">
+							<Input
+								id="handle-input"
+								aria-label="Username"
+								placeholder="@huggingface"
+								value={handle}
+								onChange={(event) =>
+									setHandle(event.target.value)
+								}
+								required
+								autoFocus
+								className="h-12 text-base"
+							/>
+						</div>
+						<Button
+							type="submit"
+							size="lg"
+							className="relative h-12 overflow-hidden rounded-full px-6 text-base font-semibold text-white shadow-[0_18px_55px_-30px_rgba(236,72,153,0.85)] transition duration-300 hover:scale-[1.01] focus-visible:ring-2 focus-visible:ring-primary/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+							disabled={isPending}
+						>
+							<span className="absolute inset-[-55%] animate-[spin_6s_linear_infinite] bg-[conic-gradient(at_50%_50%,#f97316,#f43f5e,#a855f7,#22d3ee,#22c55e,#f97316)] opacity-80" />
+							<span className="absolute inset-[2px] rounded-full bg-[linear-gradient(90deg,rgba(2,6,23,0.9),rgba(15,23,42,0.9),rgba(2,6,23,0.9))]" />
+							{isPending ? (
+								<span className="relative flex items-center justify-center">
+									<Loader2Icon className="mr-2 size-4 animate-spin" />
+									Generating…
+								</span>
+							) : (
+								<span className="relative flex items-center justify-center gap-2">
+									See my recap
+									<ArrowRightIcon className="size-4" />
+								</span>
+							)}
+						</Button>
+					</form>
+				) : (
+					<div className="mx-auto w-full max-w-none">
+						<StoryScroller wrapped={wrapped} />
+					</div>
+				)}
+			</div>
+		</section>
+	);
+}

apps/web/modules/marketing/home/components/StoryScroller.tsx

@@ -0,0 +1,1894 @@
+"use client";
+
+import * as Scrollytelling from "@bsmnt/scrollytelling";
+import { useGSAP } from "@gsap/react";
+import type { StorySlide, WrappedResult } from "@repo/wrapped";
+import { Button } from "@ui/components/button";
+import { cn } from "@ui/lib";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/all";
+import { DownloadIcon, ShareIcon } from "lucide-react";
+import Image from "next/image";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+const BASE_SIZE = 1080;
+const BASE_PADDING = 16;
+
+function getTimeline({
+	start,
+	end,
+	overlap = 0.3,
+	chunks,
+}: {
+	start: number;
+	end: number;
+	overlap?: number;
+	chunks: number;
+}) {
+	const duration = end - start;
+	const chunk = duration / chunks;
+	const raw = Array.from({ length: chunks }).map((_, i) => ({
+		start: start + i * chunk,
+		end: start + (i + 1) * chunk,
+	}));
+	if (overlap <= 0) {
+		return raw;
+	}
+
+	const overlapDuration = duration * overlap;
+	const per = overlapDuration / raw.length;
+	const adjusted = raw.map((slot, i) => ({
+		start: slot.start - per * i,
+		end: slot.end - per * i,
+	}));
+	const first = adjusted[0]?.start ?? start;
+	const last = adjusted[adjusted.length - 1]?.end ?? end;
+	const scale = duration / (last - first || duration);
+
+	return adjusted.map((slot) => ({
+		start: Math.max(start, start + (slot.start - first) * scale),
+		end: Math.min(end, start + (slot.end - first) * scale),
+	}));
+}
+
+type MediaPalette = {
+	gradient: string;
+	accent: string;
+};
+
+const archetypeHighlights: Partial<Record<ArchetypeKey, string[]>> = {
+	"Model Maestro": ["Innovative", "Precise", "Impactful"],
+	"Dataset Architect": ["Structured", "Reliable", "Curious"],
+	"Space Storyteller": ["Interactive", "Engaging", "Creative"],
+	"Research Curator": ["Analytical", "Insightful", "Rigorous"],
+	"HF Explorer": ["Versatile", "Adaptive", "Curious"],
+};
+
+const palettes: Record<StorySlide["kind"], MediaPalette> = {
+	intro: {
+		gradient:
+			"radial-gradient(circle at 18% 24%, rgba(59,130,246,0.36), transparent 32%), radial-gradient(circle at 78% 18%, rgba(236,72,153,0.32), transparent 34%), linear-gradient(135deg, #0b1224, #0b0f1a)",
+		accent: "from-sky-400 to-fuchsia-400",
+	},
+	summary: {
+		gradient:
+			"radial-gradient(circle at 15% 20%, rgba(34,197,94,0.34), transparent 32%), radial-gradient(circle at 80% 10%, rgba(59,130,246,0.30), transparent 36%), linear-gradient(145deg, #0a1818, #0d1220)",
+		accent: "from-emerald-400 to-sky-400",
+	},
+	models: {
+		gradient:
+			"radial-gradient(circle at 25% 25%, rgba(99,102,241,0.32), transparent 32%), radial-gradient(circle at 80% 0%, rgba(236,72,153,0.30), transparent 34%), linear-gradient(135deg, #0b0f1f, #0d1024)",
+		accent: "from-indigo-400 to-pink-400",
+	},
+	datasets: {
+		gradient:
+			"radial-gradient(circle at 15% 35%, rgba(34,211,238,0.30), transparent 32%), radial-gradient(circle at 85% 20%, rgba(59,130,246,0.24), transparent 34%), linear-gradient(135deg, #081926, #0b1624)",
+		accent: "from-cyan-400 to-sky-400",
+	},
+	spaces: {
+		gradient:
+			"radial-gradient(circle at 20% 25%, rgba(248,113,113,0.28), transparent 32%), radial-gradient(circle at 70% 10%, rgba(251,191,36,0.26), transparent 34%), linear-gradient(135deg, #1a0f0f, #1d0f16)",
+		accent: "from-amber-400 to-rose-400",
+	},
+	papers: {
+		gradient:
+			"radial-gradient(circle at 18% 35%, rgba(94,234,212,0.28), transparent 34%), radial-gradient(circle at 70% 15%, rgba(168,85,247,0.28), transparent 36%), linear-gradient(135deg, #0d1b1f, #0f1826)",
+		accent: "from-teal-400 to-purple-400",
+	},
+	badges: {
+		gradient:
+			"radial-gradient(circle at 22% 28%, rgba(250,204,21,0.32), transparent 32%), radial-gradient(circle at 78% 14%, rgba(59,130,246,0.30), transparent 36%), linear-gradient(135deg, #14110f, #0f1621)",
+		accent: "from-yellow-300 to-sky-400",
+	},
+	archetype: {
+		gradient:
+			"radial-gradient(circle at 20% 30%, rgba(236,72,153,0.30), transparent 34%), radial-gradient(circle at 80% 12%, rgba(99,102,241,0.28), transparent 36%), linear-gradient(135deg, #0f0f1a, #0d1224)",
+		accent: "from-pink-400 to-indigo-400",
+	},
+	cta: {
+		gradient:
+			"radial-gradient(circle at 12% 24%, rgba(34,197,94,0.30), transparent 32%), radial-gradient(circle at 76% 12%, rgba(59,130,246,0.30), transparent 36%), linear-gradient(135deg, #0f1512, #0e1620)",
+		accent: "from-emerald-400 to-sky-400",
+	},
+	share: {
+		gradient:
+			"radial-gradient(circle at 20% 25%, rgba(96,165,250,0.30), transparent 30%), radial-gradient(circle at 78% 18%, rgba(52,211,153,0.32), transparent 36%), linear-gradient(135deg, #0c101a, #0a0f1c)",
+		accent: "from-sky-400 to-emerald-300",
+	},
+};
+
+function sanitizeHighlights(tags: string[]): string[] {
+	const banned = ["gradio", "en", "region:us", "region:eu", "demo"];
+	const filtered = tags.filter((tag) => !banned.includes(tag.toLowerCase()));
+	return filtered.length > 0 ? filtered : ["Keep exploring", "Stay curious"];
+}
+
+type ArchetypeKey =
+	| "Model Maestro"
+	| "Dataset Architect"
+	| "Space Storyteller"
+	| "Research Curator"
+	| "HF Explorer";
+
+const archetypeImage: Record<ArchetypeKey, string> = {
+	"Model Maestro": "/images/huggies/NEW_modelmaestro.png",
+	"Dataset Architect": "/images/huggies/NEW_datasetarchitect.png",
+	"Space Storyteller": "/images/huggies/NEW_spacestoryteller.png",
+	"Research Curator": "/images/huggies/NEW_researchcurator.png",
+	"HF Explorer": "/images/huggies/Huggy Hi.png",
+};
+
+const gifMap: Partial<Record<StorySlide["kind"], string[]>> = {
+	intro: ["/images/huggies/Huggy Pop.gif"],
+	summary: ["/images/huggies/Vibing Huggy.gif"],
+	models: ["/images/huggies/Doodle Huggy.gif"],
+	spaces: [],
+	datasets: [],
+	papers: [],
+	cta: ["/images/huggies/Huggy Pop.gif"],
+	share: [],
+};
+
+const badgeImage: Record<string, string> = {
+	"Model Powerhouse": "/images/huggies/Optimum Huggy.png",
+	"Community Favorite": "/images/huggies/NEW_communityfavorite.png",
+	"Research Beacon": "/images/huggies/NEW_researchbeacon.png",
+	"Spaces Trailblazer": "/images/huggies/Rocket Huggy.png",
+	"Data Shaper": "/images/huggies/Manager Huggy.png",
+	"Model Builder": "/images/huggies/Transformer20Huggy.png",
+	"HF Explorer": "/images/huggies/Huggy Hi.png",
+};
+
+const archetypeAccents: Record<ArchetypeKey, string> = {
+	"Model Maestro": "from-indigo-400 to-sky-400",
+	"Dataset Architect": "from-[#e85048] to-[#ff9a7d]",
+	"Space Storyteller": "from-sky-300 to-cyan-400",
+	"Research Curator": "from-purple-500 to-violet-400",
+	"HF Explorer": "from-emerald-400 to-lime-300",
+};
+
+function imageForSlide(
+	slide: StorySlide,
+	wrapped: WrappedResult,
+	badge: string,
+): { src?: string; isGif: boolean } {
+	if (slide.kind !== "badges" && slide.kind !== "archetype") {
+		const gifPool = gifMap[slide.kind];
+		if (gifPool && gifPool.length > 0) {
+			const gif = gifPool[0];
+			return { src: gif, isGif: true };
+		}
+	}
+	switch (slide.kind) {
+		case "intro":
+			return { src: "/images/huggies/Huggy Hi.png", isGif: false };
+		case "summary":
+			return { src: "/images/huggies/X-ray Huggy.png", isGif: false };
+		case "models":
+			return {
+				src: "/images/huggies/Transformer20Huggy.png",
+				isGif: false,
+			};
+		case "datasets":
+			return { src: "/images/huggies/Growing20Huggy.png", isGif: false };
+		case "spaces":
+			return { src: "/images/huggies/Rocket Huggy.png", isGif: false };
+		case "papers":
+			return { src: "/images/huggies/Paper Huggy.png", isGif: false };
+		case "archetype": {
+			const key =
+				(wrapped.archetype as ArchetypeKey) in archetypeImage
+					? (wrapped.archetype as ArchetypeKey)
+					: ("HF Explorer" as ArchetypeKey);
+			return { src: archetypeImage[key], isGif: false };
+		}
+		case "badges":
+			return {
+				src: badgeImage[badge] ?? "/images/huggies/Huggy Hi.png",
+				isGif: false,
+			};
+		case "cta":
+			return { src: "/images/huggies/Huggy Sunny.png", isGif: false };
+		case "share": {
+			const byArchetype =
+				(wrapped.archetype as ArchetypeKey) in archetypeImage
+					? archetypeImage[wrapped.archetype as ArchetypeKey]
+					: undefined;
+			return {
+				src: byArchetype ?? "/images/huggies/Huggy Sunny.png",
+				isGif: false,
+			};
+		}
+		default:
+			return { src: undefined, isGif: false };
+	}
+}
+
+function truncateHandle(handle: string, max = 25): string {
+	if (handle.length <= max) {
+		return handle;
+	}
+	return `${handle.slice(0, max - 1)}…`;
+}
+
+function ellipsize(value: string, max = 40): string {
+	if (value.length <= max) {
+		return value;
+	}
+	return `${value.slice(0, max - 3)}...`;
+}
+
+function pickBadge(activity: WrappedResult["activity"]): string {
+	if (activity.totalDownloads > 1_000_000) {
+		return "Model Powerhouse";
+	}
+	if (activity.totalLikes > 5_000) {
+		return "Community Favorite";
+	}
+	if (activity.papers.length >= 2) {
+		return "Research Beacon";
+	}
+	if (activity.spaces.length >= 3) {
+		return "Spaces Trailblazer";
+	}
+	if (activity.datasets.length >= 5) {
+		return "Data Shaper";
+	}
+	if (activity.models.length >= 3) {
+		return "Model Builder";
+	}
+	return "HF Explorer";
+}
+
+function badgeReason(badge: string): string {
+	switch (badge) {
+		case "Model Powerhouse":
+			return "1M+ downloads across your work";
+		case "Community Favorite":
+			return "5k+ likes from the community";
+		case "Research Beacon":
+			return "Shared multiple research papers";
+		case "Spaces Trailblazer":
+			return "Built 3+ interactive spaces";
+		case "Data Shaper":
+			return "Published 5+ datasets";
+		case "Model Builder":
+			return "Created 3+ models";
+		case "HF Explorer":
+		default:
+			return "Exploring across repos and topics";
+	}
+}
+
+function buildBadgeMetrics(
+	badge: string,
+	wrapped: WrappedResult,
+	fmt: Intl.NumberFormat,
+): { label: string; value: string }[] {
+	const activity = wrapped.activity;
+
+	switch (badge) {
+		case "Model Powerhouse":
+			return [
+				{
+					label: "Downloads",
+					value: fmt.format(activity.totalDownloads),
+				},
+				{
+					label: "Models",
+					value: fmt.format(activity.models.length || 1),
+				},
+			];
+		case "Community Favorite":
+			return [
+				{
+					label: "Likes",
+					value: fmt.format(activity.totalLikes),
+				},
+				{
+					label: "Repos",
+					value: fmt.format(activity.totalRepos),
+				},
+			];
+		case "Research Beacon":
+			return [
+				{
+					label: "Papers",
+					value: fmt.format(activity.papers.length),
+				},
+				{
+					label: "Repos",
+					value: fmt.format(activity.totalRepos),
+				},
+			];
+		case "Spaces Trailblazer":
+			return [
+				{
+					label: "Spaces",
+					value: fmt.format(activity.spaces.length),
+				},
+				{
+					label: "Likes",
+					value: fmt.format(activity.totalLikes),
+				},
+			];
+		case "Data Shaper":
+			return [
+				{
+					label: "Datasets",
+					value: fmt.format(activity.datasets.length),
+				},
+				{
+					label: "Downloads",
+					value: fmt.format(activity.totalDownloads),
+				},
+			];
+		case "Model Builder":
+			return [
+				{
+					label: "Models",
+					value: fmt.format(activity.models.length),
+				},
+				{
+					label: "Downloads",
+					value: fmt.format(activity.totalDownloads),
+				},
+			];
+		case "HF Explorer":
+		default:
+			return [
+				{
+					label: "Repos",
+					value: fmt.format(activity.totalRepos),
+				},
+				{
+					label: "Downloads",
+					value: fmt.format(activity.totalDownloads),
+				},
+			];
+	}
+}
+
+function buildSlides(wrapped: WrappedResult): StorySlide[] {
+	const fmt = new Intl.NumberFormat("en-US", { notation: "compact" });
+	const badge = pickBadge(wrapped.activity);
+	const topModels = wrapped.activity.models.slice(0, 3);
+	const topDatasets = wrapped.activity.datasets.slice(0, 3);
+	const topSpaces = wrapped.activity.spaces.slice(0, 3);
+	const topPapers = wrapped.activity.papers.slice(0, 2);
+
+	return [
+		{
+			id: "intro",
+			kind: "intro",
+			title: `Your ${wrapped.year} Hugging Face Wrapped`,
+			subtitle: wrapped.profile.displayName ?? wrapped.profile.handle,
+			metrics: [
+				{
+					label: "Repositories",
+					value: wrapped.activity.totalRepos.toString(),
+				},
+				{
+					label: "Downloads",
+					value: fmt.format(wrapped.activity.totalDownloads),
+				},
+			],
+			highlights: wrapped.activity.topTags.slice(0, 3),
+		},
+		{
+			id: "summary",
+			kind: "summary",
+			title: "Activity pulse",
+			subtitle: "Models, datasets, spaces, papers",
+			metrics: [
+				{
+					label: "Models",
+					value: wrapped.activity.models.length.toString(),
+				},
+				{
+					label: "Datasets",
+					value: wrapped.activity.datasets.length.toString(),
+				},
+				{
+					label: "Spaces",
+					value: wrapped.activity.spaces.length.toString(),
+				},
+				{
+					label: "Papers",
+					value: wrapped.activity.papers.length.toString(),
+				},
+			],
+			highlights: [
+				wrapped.activity.busiestMonth
+					? `Busiest month: ${wrapped.activity.busiestMonth}`
+					: "Consistent all year",
+			],
+		},
+		...(topModels.length
+			? [
+					{
+						id: "models",
+						kind: "models",
+						title: "Models that led",
+						subtitle: "Most downloaded & loved",
+						metrics: topModels.map((repo) => ({
+							label: repo.name,
+							value: `${fmt.format(repo.downloads ?? 0)} downloads`,
+						})),
+						highlights: wrapped.activity.topTags.slice(0, 2),
+					} satisfies StorySlide,
+				]
+			: []),
+		...(topDatasets.length
+			? [
+					{
+						id: "datasets",
+						kind: "datasets",
+						title: "Datasets that fueled",
+						subtitle: "Community favorites",
+						metrics: topDatasets.map((repo) => ({
+							label: repo.name,
+							value: `${fmt.format(repo.downloads ?? 0)} pulls`,
+						})),
+						highlights: wrapped.activity.topTags.slice(0, 2),
+					} satisfies StorySlide,
+				]
+			: []),
+		...(topSpaces.length
+			? [
+					{
+						id: "spaces",
+						kind: "spaces",
+						title: "Spaces that told the story",
+						subtitle: "Interactive apps that resonated",
+						metrics: topSpaces.map((repo) => ({
+							label: repo.name,
+							value: `${fmt.format(repo.likes ?? 0)} likes`,
+						})),
+						highlights: wrapped.activity.topTags.slice(0, 2),
+					} satisfies StorySlide,
+				]
+			: []),
+		...(topPapers.length
+			? [
+					{
+						id: "papers",
+						kind: "papers",
+						title: "Research you shared",
+						subtitle: "Papers and findings",
+						metrics: topPapers.map((paper) => ({
+							label: paper.title,
+							value: paper.publishedAt
+								? new Date(paper.publishedAt)
+										.getFullYear()
+										.toString()
+								: "Published",
+						})),
+					} satisfies StorySlide,
+				]
+			: []),
+		{
+			id: "archetype",
+			kind: "archetype",
+			title: "Your archetype",
+			subtitle: wrapped.archetype,
+			metrics: [
+				{
+					label: "Downloads",
+					value: fmt.format(wrapped.activity.totalDownloads),
+				},
+				{
+					label: "Likes",
+					value: fmt.format(wrapped.activity.totalLikes),
+				},
+			],
+			highlights: sanitizeHighlights(
+				archetypeHighlights[wrapped.archetype as ArchetypeKey] ??
+					(wrapped.activity.topTags ?? []).slice(0, 3),
+			),
+		},
+		{
+			id: "badges",
+			kind: "badges",
+			title: "Your badge this year",
+			subtitle: badge,
+			metrics: buildBadgeMetrics(badge, wrapped, fmt),
+			highlights: [badgeReason(badge)],
+		},
+		{
+			id: "share",
+			kind: "share",
+			title: `@${truncateHandle(wrapped.profile.handle)}`,
+			subtitle: `Your Hugging Face 🤗 in ${wrapped.year} `,
+			metrics: [
+				{
+					label: "Badge",
+					value: badge,
+				},
+				{
+					label: "Archetype",
+					value: wrapped.archetype,
+				},
+				{
+					label:
+						wrapped.activity.papers.length >
+						Math.max(
+							wrapped.activity.models.length,
+							wrapped.activity.datasets.length,
+							wrapped.activity.spaces.length,
+						)
+							? "Papers"
+							: "Repos",
+					value:
+						wrapped.activity.papers.length >
+						Math.max(
+							wrapped.activity.models.length,
+							wrapped.activity.datasets.length,
+							wrapped.activity.spaces.length,
+						)
+							? fmt.format(wrapped.activity.papers.length)
+							: fmt.format(wrapped.activity.totalRepos),
+				},
+				{
+					label: "Downloads",
+					value: fmt.format(wrapped.activity.totalDownloads),
+				},
+				{
+					label: "Likes",
+					value: fmt.format(wrapped.activity.totalLikes),
+				},
+				{
+					label: "Top model",
+					value:
+						wrapped.activity.models[0]?.name ??
+						"No model yet — create one!",
+				},
+				{
+					label: "Top dataset",
+					value:
+						wrapped.activity.datasets[0]?.name ??
+						"No dataset yet — publish one!",
+				},
+				{
+					label: "Top space",
+					value:
+						wrapped.activity.spaces[0]?.name ??
+						"No space yet — launch one!",
+				},
+			],
+			highlights: [
+				...(wrapped.activity.topTags.slice(0, 1) ?? []),
+				"huggingface.co/spaces/hf-wrapped/2025",
+			],
+		},
+	];
+}
+
+export function StoryScroller({ wrapped }: { wrapped: WrappedResult }) {
+	const slides = useMemo<StorySlide[]>(() => buildSlides(wrapped), [wrapped]);
+	const panelsRef = useRef<Map<string, HTMLElement>>(new Map());
+	const [isDownloading, setIsDownloading] = useState(false);
+	const [isMobile, setIsMobile] = useState(false);
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+	const scrollerRef = useRef<HTMLDivElement | null>(null);
+	const progressRef = useRef<HTMLDivElement | null>(null);
+	const currentIndexRef = useRef(0);
+	const badgeRef = useRef(pickBadge(wrapped.activity));
+	const [scale, setScale] = useState(1);
+	const scaleRef = useRef<HTMLDivElement | null>(null);
+	const reduceMotion = prefersReducedMotion || isMobile;
+	const disableAnim = isDownloading || reduceMotion;
+
+	useEffect(() => {
+		const updateMobile = () => {
+			if (typeof window !== "undefined") {
+				setIsMobile(window.innerWidth <= 768);
+			}
+		};
+		updateMobile();
+		window.addEventListener("resize", updateMobile);
+		return () => window.removeEventListener("resize", updateMobile);
+	}, []);
+
+	useEffect(() => {
+		if (typeof window === "undefined") {
+			return;
+		}
+		const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+		setPrefersReducedMotion(mql.matches);
+		const handler = (event: MediaQueryListEvent) => setPrefersReducedMotion(event.matches);
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, []);
+
+	useGSAP(() => {
+		if (disableAnim) {
+			return;
+		}
+		gsap.registerPlugin(ScrollTrigger);
+		const scroller = scrollerRef.current;
+
+		// lock page scroll; route all scroll to the stories container
+		const prevHtmlOverflow =
+			typeof document !== "undefined"
+				? document.documentElement.style.overflow
+				: "";
+		const prevBodyOverflow =
+			typeof document !== "undefined" ? document.body.style.overflow : "";
+		if (typeof document !== "undefined") {
+			document.documentElement.style.overflow = "hidden";
+			document.body.style.overflow = "hidden";
+		}
+
+		ScrollTrigger.defaults({
+			scroller: scroller ?? undefined,
+		});
+
+		return () => {
+			ScrollTrigger.defaults({
+				scroller: undefined,
+			});
+			if (typeof document !== "undefined") {
+				document.documentElement.style.overflow = prevHtmlOverflow;
+				document.body.style.overflow = prevBodyOverflow;
+			}
+		};
+	}, []);
+
+	useEffect(() => {
+		const scroller = scrollerRef.current;
+		if (!scroller) {
+			return;
+		}
+		const handleScroll = () => {
+			const max = scroller.scrollHeight - scroller.clientHeight;
+			const ratio = max > 0 ? scroller.scrollTop / max : 0;
+			if (progressRef.current) {
+				progressRef.current.style.height = `${
+					Math.min(1, Math.max(0, ratio)) * 100
+				}%`;
+			}
+			const pct = ratio * 100;
+			const idx = segments.findIndex(
+				(slot) => pct >= slot.start && pct < slot.end,
+			);
+			currentIndexRef.current = idx >= 0 ? idx : 0;
+		};
+		scroller.addEventListener("scroll", handleScroll, { passive: true });
+		handleScroll();
+		return () => {
+			scroller.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+
+	const recomputeScale = useCallback(() => {
+		if (typeof window === "undefined") {
+			return;
+		}
+		const availableWidth = window.innerWidth - BASE_PADDING * 2;
+		const availableHeight = window.innerHeight - BASE_PADDING * 2;
+		const ratio = Math.min(
+			availableWidth / BASE_SIZE,
+			availableHeight / BASE_SIZE,
+		);
+		// keep the layout rigid and only scale down when space is limited
+		const next = Math.min(1, ratio);
+		setScale(Number.isFinite(next) && next > 0 ? next : 1);
+	}, []);
+
+	useEffect(() => {
+		recomputeScale();
+		window.addEventListener("resize", recomputeScale);
+		return () => {
+			window.removeEventListener("resize", recomputeScale);
+		};
+	}, [recomputeScale]);
+
+	const downloadSlide = useCallback(async () => {
+		const slideId = slides[currentIndexRef.current]?.id;
+		const target =
+			(slideId ? panelsRef.current.get(slideId) : undefined) ??
+			panelsRef.current.values().next().value;
+		if (!target) {
+			return;
+		}
+
+		setIsDownloading(true);
+		try {
+			const { toPng } = await import("html-to-image");
+			const prev = {
+				transform: target.style.transform,
+				opacity: target.style.opacity,
+				filter: target.style.filter,
+				transition: target.style.transition,
+				borderRadius: target.style.borderRadius,
+				backgroundColor: target.style.backgroundColor,
+			};
+			const offsetX = "-482px";
+			const offsetY = "-40px";
+			target.style.transform = `translate(${offsetX}, ${offsetY})`;
+			target.style.opacity = "1";
+			target.style.filter = "none";
+			target.style.transition = "none";
+			target.style.borderRadius = "0px";
+			target.style.backgroundColor = "#000";
+			const dataUrl = await toPng(target, {
+				cacheBust: true,
+				pixelRatio: reduceMotion ? 1.5 : 2,
+				backgroundColor: "#000",
+				style: {
+					transform: `translate(${offsetX}, ${offsetY})`,
+					opacity: "1",
+					filter: "none",
+					transformOrigin: "top left",
+					borderRadius: "0px",
+					backgroundColor: "#000",
+				},
+			});
+			target.style.transform = prev.transform;
+			target.style.opacity = prev.opacity;
+			target.style.filter = prev.filter;
+			target.style.transition = prev.transition;
+			target.style.borderRadius = prev.borderRadius;
+			target.style.backgroundColor = prev.backgroundColor;
+
+			const link = document.createElement("a");
+			link.download = `${wrapped.profile.handle}-story.png`;
+			link.href = dataUrl;
+			link.click();
+		} catch (error) {
+			console.error("Failed to export story", error);
+		} finally {
+			setIsDownloading(false);
+		}
+	}, [wrapped.profile.handle]);
+
+	const segments = useMemo(
+		() =>
+			getTimeline({
+				start: 0,
+				end: 100,
+				overlap: 0.18,
+				chunks: Math.max(slides.length, 1),
+			}),
+		[slides.length],
+	);
+
+	return (
+		<div
+			className="relative mx-auto grid min-h-screen w-full place-items-center overflow-hidden pb-10"
+			style={{
+				fontFamily: "BasementGrotesque, var(--font-sans, sans-serif)",
+			}}
+		>
+			<div
+				ref={scrollerRef}
+				className="sticky top-0 h-screen overflow-x-hidden overflow-y-auto overscroll-contain"
+				style={{
+					scrollbarWidth: "none",
+					touchAction: "auto",
+					scrollBehavior: reduceMotion ? "auto" : "smooth",
+				}}
+			>
+				<Scrollytelling.Root defaults={{ ease: "power1.out" }}>
+					<Scrollytelling.Pin
+						childHeight="100vh"
+						pinSpacerHeight={`${slides.length * 110}vh`}
+						pinSpacerClassName="rounded-3xl"
+					>
+						<div className="flex h-full w-full items-center justify-center">
+							<div
+								ref={scaleRef}
+								className="relative"
+								style={{
+									width: `${BASE_SIZE}px`,
+									height: `${BASE_SIZE}px`,
+									transform: `scale(${scale})`,
+									transformOrigin: "center center",
+									padding: `${BASE_PADDING}px`,
+								}}
+							>
+								{!reduceMotion && (
+									<div className="pointer-events-none absolute -right-3 top-1/2 z-20 flex -translate-y-1/2 items-center justify-center text-white/80">
+										<div className="relative h-10 w-6 rounded-full border border-white/50">
+											<span className="absolute left-1/2 top-2 h-2 w-1 -translate-x-1/2 rounded-full bg-white/80 animate-bounce" />
+										</div>
+									</div>
+								)}
+
+								<div className="absolute left-8 top-8 z-20 flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/80">
+									<span className="rounded-full bg-white/10 px-3 py-1">
+										{wrapped.profile.displayName ??
+											`@${wrapped.profile.handle}`}
+									</span>
+									<span className="rounded-full bg-white/10 px-3 py-1">
+										Hugging Face Wrapped {wrapped.year}
+									</span>
+								</div>
+
+								<div className="absolute right-8 top-8 z-20 flex gap-2">
+									<Button
+										size="sm"
+										variant="secondary"
+										className="border border-white/30 bg-white/10 text-white shadow-sm transition hover:bg-white/20"
+										onClick={downloadSlide}
+										disabled={isDownloading}
+									>
+										<DownloadIcon className="mr-2 size-4" />
+										{isDownloading
+											? "Exporting…"
+											: "Export PNG"}
+									</Button>
+									<Button
+										size="sm"
+										variant="secondary"
+										className="border border-white/30 bg-white/10 text-white shadow-sm transition hover:bg-white/20"
+										onClick={async () => {
+											const url =
+												typeof window !== "undefined"
+													? window.location.href
+													: "";
+											if (navigator.share && url) {
+												await navigator
+													.share({ url })
+													.catch(() => {});
+											} else if (
+												navigator.clipboard &&
+												url
+											) {
+												await navigator.clipboard
+													.writeText(url)
+													.catch(() => {});
+											}
+										}}
+									>
+										<ShareIcon className="mr-2 size-4" />
+										Share
+									</Button>
+								</div>
+
+								<div className="relative flex h-full w-full items-center justify-center px-8 py-8">
+									<div className="relative mx-auto flex aspect-square w-[98%] max-w-[1200px] items-center justify-center overflow-hidden rounded-3xl border border-white/10 bg-black/35 shadow-[0_18px_55px_-35px_rgba(59,130,246,0.35)] backdrop-blur-sm">
+										<div className="pointer-events-none absolute -left-8 inset-y-0 z-30 w-1 rounded-full bg-white/10">
+											<div
+												ref={progressRef}
+												className="absolute left-0 top-0 w-full rounded-full bg-white"
+											/>
+										</div>
+
+										{slides.map((slide, index) => {
+											const slot = segments[index] ?? {
+												start: 0,
+												end: 100,
+											};
+											const mid =
+												slot.start +
+												(slot.end - slot.start) * 0.55;
+											const tail =
+												slot.start +
+												(slot.end - slot.start) * 0.9;
+											const palette =
+												palettes[slide.kind] ??
+												palettes.intro;
+											const archetypeKey =
+												(wrapped.archetype as ArchetypeKey) in
+												archetypeAccents
+													? (wrapped.archetype as ArchetypeKey)
+													: ("HF Explorer" as ArchetypeKey);
+											const imageSrc = imageForSlide(
+												slide,
+												wrapped,
+												badgeRef.current,
+											);
+											const mediaLeft = index % 2 === 1;
+											const isShare =
+												slide.kind === "share";
+											const accentFill = `bg-gradient-to-br ${
+												archetypeAccents[
+													archetypeKey
+												] ?? palette.accent
+											}`;
+											const hasAccentRail = false;
+											const isSingleColumn =
+												slide.kind === "archetype" ||
+												slide.kind === "badges";
+											const isBadge =
+												slide.kind === "badges";
+											const isArchetype =
+												slide.kind === "archetype";
+											const shareLink =
+												isShare &&
+												(slide.highlights ?? []).find(
+													(h) =>
+														h.includes(
+															"huggingface.co/spaces/hf-wrapped/2025",
+														),
+												);
+											const filteredHighlights = shareLink
+												? (
+														slide.highlights ?? []
+													).filter(
+														(h) => h !== shareLink,
+													)
+												: slide.highlights;
+
+											return (
+												<Scrollytelling.Animation
+													// eslint-disable-next-line react/no-array-index-key
+													key={slide.id + index}
+													tween={[
+														{
+															start: slot.start,
+															end: mid,
+															fromTo: [
+																{
+																	opacity: 0,
+																	y: 80,
+																	scale: 0.97,
+																},
+																{
+																	opacity: 1,
+																	y: 0,
+																	scale: 1,
+																},
+															],
+														},
+														{
+															start: mid,
+															end: tail,
+															to: {
+																opacity: 0,
+																y: -60,
+																scale: 0.985,
+															},
+														},
+													]}
+												>
+													<article
+														ref={(node) => {
+															if (node) {
+																panelsRef.current.set(
+																	slide.id,
+																	node,
+																);
+															}
+														}}
+														className={cn(
+															"absolute left-1/2 top-10 grid aspect-square w-[94%] max-w-[1140px] -translate-x-1/2 items-start overflow-hidden rounded-[30px] border border-white/12 bg-black/35 p-9 shadow-[0_28px_95px_-55px_rgba(59,130,246,0.5)] backdrop-blur-xl ring-1 ring-white/5",
+															isSingleColumn
+																? "grid-cols-1 gap-6"
+																: "grid-cols-[1.05fr,0.95fr] grid-rows-[auto,1fr] gap-4",
+															mediaLeft &&
+																!isSingleColumn
+																? "[&>div:nth-child(2)]:order-1 [&>div:nth-child(1)]:order-2"
+																: "",
+														)}
+														style={{
+															willChange:
+																"transform, opacity",
+															backgroundImage:
+																palette.gradient,
+														}}
+													>
+														{hasAccentRail ? (
+															<span
+																className={cn(
+																	"absolute inset-y-0 left-0 w-[6px] rounded-full opacity-90",
+																	accentFill,
+																)}
+															/>
+														) : null}
+														<div className="absolute left-8 right-8 top-8 z-10 flex items-center justify-between gap-3 text-xs uppercase tracking-[0.18em] text-white/70">
+															<div className="flex items-center gap-2">
+																<span className="rounded-full bg-white/15 px-3 py-1 text-white/80">
+																	{slide.kind}
+																</span>
+																{isShare &&
+																shareLink ? (
+																	<span className="rounded-full bg-white/15 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.18em] text-white/80">
+																		{
+																			shareLink
+																		}
+																	</span>
+																) : null}
+															</div>
+															<span className="rounded-full bg-white/15 px-3 py-1 text-white/80">
+																{index + 1} /{" "}
+																{slides.length}
+															</span>
+														</div>
+
+														{slide.kind ===
+															"intro" &&
+														wrapped.profile
+															.avatarUrl ? (
+															<div className="flex items-center gap-3 rounded-2xl border border-white/15 bg-black/30 px-4 py-3">
+																<Image
+																	src={
+																		wrapped
+																			.profile
+																			.avatarUrl
+																	}
+																	alt={
+																		wrapped
+																			.profile
+																			.handle
+																	}
+																	width={48}
+																	height={48}
+																	className="size-12 rounded-full border border-white/20 object-cover"
+																/>
+																<div className="flex flex-col text-sm">
+																	<span className="font-semibold text-white">
+																		{wrapped
+																			.profile
+																			.displayName ??
+																			wrapped
+																				.profile
+																				.handle}
+																	</span>
+																	<span className="text-white/70">
+																		@
+																		{
+																			wrapped
+																				.profile
+																				.handle
+																		}
+																	</span>
+																</div>
+															</div>
+														) : null}
+
+														{isShare ? (
+															<header className="col-span-1 space-y-4 px-2 pt-10 w-full overflow-hidden">
+																{disableAnim ? (
+																	<h2 className="block w-full truncate whitespace-nowrap text-5xl font-semibold leading-tight text-white mt-8">
+																		{
+																			slide.title
+																		}
+																	</h2>
+																) : (
+																	<Scrollytelling.Animation
+																		tween={{
+																			start: slot.start,
+																			end: mid,
+																			fromTo: [
+																				{
+																					opacity: 0,
+																					y: 40,
+																				},
+																				{
+																					opacity: 1,
+																					y: 0,
+																				},
+																			],
+																		}}
+																	>
+																		<h2 className="block w-full truncate whitespace-nowrap text-5xl font-semibold leading-tight text-white mt-8">
+																			{
+																				slide.title
+																			}
+																		</h2>
+																	</Scrollytelling.Animation>
+																)}
+																{slide.subtitle ? (
+																	disableAnim ? (
+																		<p className="wrap-break-word font-semibold text-white/85 text-[50px] sm:text-[58px]">
+																			{
+																				slide.subtitle
+																			}
+																		</p>
+																	) : (
+																		<Scrollytelling.Animation
+																			tween={{
+																				start:
+																					slot.start +
+																					(mid -
+																						slot.start) *
+																						0.2,
+																				end: mid,
+																				fromTo: [
+																					{
+																						opacity: 0,
+																						y: 30,
+																					},
+																					{
+																						opacity: 1,
+																						y: 0,
+																					},
+																				],
+																			}}
+																		>
+																			<p
+																				className={cn(
+																					"wrap-break-word font-semibold text-white/85",
+																					isShare
+																						? "text-[50px] sm:text-[58px]"
+																						: "text-[50px]",
+																				)}
+																			>
+																				{
+																					slide.subtitle
+																				}
+																			</p>
+																		</Scrollytelling.Animation>
+																	)
+																) : null}
+															</header>
+														) : null}
+
+														{isSingleColumn ? (
+															<div className="grid h-full w-full grid-cols-1 place-items-center gap-5 pt-8 text-center">
+																<div className="flex h-full w-full max-w-[880px] flex-col items-center justify-center gap-5 px-4">
+																	<header className="space-y-4">
+																		<Scrollytelling.Animation
+																			tween={{
+																				start: slot.start,
+																				end: mid,
+																				fromTo: [
+																					{
+																						opacity: 0,
+																						y: 32,
+																					},
+																					{
+																						opacity: 1,
+																						y: 0,
+																					},
+																				],
+																			}}
+																		>
+																			<h2 className="text-balance text-5xl font-bold leading-tight sm:text-6xl">
+																				{
+																					slide.title
+																				}
+																			</h2>
+																		</Scrollytelling.Animation>
+																		{slide.subtitle ? (
+																			<Scrollytelling.Animation
+																				tween={{
+																					start:
+																						slot.start +
+																						(mid -
+																							slot.start) *
+																							0.2,
+																					end: mid,
+																					fromTo: [
+																						{
+																							opacity: 0,
+																							y: 28,
+																						},
+																						{
+																							opacity: 1,
+																							y: 0,
+																						},
+																					],
+																				}}
+																			>
+																				<p
+																					className={cn(
+																						"text-white/80",
+																						isBadge ||
+																							isArchetype
+																							? "text-3xl font-semibold leading-tight"
+																							: "text-xl",
+																					)}
+																				>
+																					{
+																						slide.subtitle
+																					}
+																				</p>
+																			</Scrollytelling.Animation>
+																		) : null}
+																	</header>
+
+																	{imageSrc?.src && (
+																		<div className="flex w-full items-center justify-center">
+																			<Image
+																				src={
+																					imageSrc.src
+																				}
+																				alt={`${slide.kind} visual`}
+																				width={
+																					560
+																				}
+																				height={
+																					560
+																				}
+																				unoptimized={
+																					imageSrc.isGif
+																				}
+																				className="max-h-[460px] max-w-[460px] object-contain"
+																			/>
+																		</div>
+																	)}
+
+																	{slide.metrics &&
+																		slide
+																			.metrics
+																			.length >
+																			0 && (
+																			<div className="flex w-full flex-col items-center gap-4">
+																				{[
+																					"models",
+																					"datasets",
+																					"spaces",
+																					"papers",
+																				].includes(
+																					slide.kind,
+																				) ? (
+																					<ul className="flex w-full max-w-[760px] flex-col gap-4">
+																						{slide.metrics.map(
+																							(
+																								metric,
+																								idx,
+																							) => (
+																								<li
+																									key={`${slide.id}-${metric.label}`}
+																									className="group relative flex items-center justify-between gap-4 overflow-hidden rounded-2xl border border-white/12 bg-white/5 px-6 py-5 shadow-lg shadow-black/25 backdrop-blur"
+																									data-story-metric
+																								>
+																									<div className="flex min-w-0 flex-col gap-2 text-left">
+																										<p className="truncate text-base uppercase tracking-wide text-white/85">
+																											{
+																												metric.label
+																											}
+																										</p>
+																										<p className="text-3xl font-semibold text-white">
+																											{
+																												metric.value
+																											}
+																										</p>
+																									</div>
+																									<span className="rounded-full border border-white/20 bg-white/10 px-3.5 py-2 text-[12px] uppercase tracking-wide text-white/80">
+																										#
+																										{idx +
+																											1}
+																									</span>
+																								</li>
+																							),
+																						)}
+																					</ul>
+																				) : (
+																					<ul className="grid w-full max-w-[780px] grid-cols-2 gap-4">
+																						{slide.metrics.map(
+																							(
+																								metric,
+																							) => (
+																								<li
+																									key={`${slide.id}-${metric.label}`}
+																									className="group relative overflow-hidden rounded-2xl border border-white/12 bg-white/5 px-6 py-5 shadow-lg shadow-black/25 backdrop-blur"
+																									data-story-metric
+																								>
+																									<p className="truncate text-base uppercase tracking-wide text-white/85">
+																										{
+																											metric.label
+																										}
+																									</p>
+																									<p className="text-3xl font-semibold text-white">
+																										{
+																											metric.value
+																										}
+																									</p>
+																								</li>
+																							),
+																						)}
+																					</ul>
+																				)}
+																			</div>
+																		)}
+
+																	{filteredHighlights &&
+																		filteredHighlights.filter(
+																			(
+																				item,
+																			) => {
+																				const banned =
+																					[
+																						"gradio",
+																						"en",
+																						"region:us",
+																						"region:eu",
+																						"demo",
+																					];
+																				return !banned.includes(
+																					item.toLowerCase(),
+																				);
+																			},
+																		)
+																			.length >
+																			0 && (
+																			<div className="flex flex-wrap justify-center gap-2">
+																				{filteredHighlights
+																					.filter(
+																						(
+																							item,
+																						) => {
+																							const banned =
+																								[
+																									"gradio",
+																									"en",
+																									"region:us",
+																									"region:eu",
+																									"demo",
+																								];
+																							return !banned.includes(
+																								item.toLowerCase(),
+																							);
+																						},
+																					)
+																					.map(
+																						(
+																							item,
+																						) => (
+																							<span
+																								key={
+																									item
+																								}
+																								className={cn(
+																									item.includes(
+																										"huggingface.co/spaces/hf-wrapped/2025",
+																									)
+																										? "truncate bg-transparent px-0 py-0 text-white/90"
+																										: "truncate rounded-full border border-white/20 bg-white/5 shadow-sm shadow-black/20 transition hover:-translate-y-[1px] hover:border-white/35 hover:bg-white/10",
+																									!item.includes(
+																										"huggingface.co/spaces/hf-wrapped/2025",
+																									) &&
+																										(isShare
+																											? "px-9 py-3.5 text-2xl font-semibold text-white"
+																											: "px-4 py-1.5 text-sm font-semibold text-white/90"),
+																								)}
+																								data-story-badge
+																							>
+																								{
+																									item
+																								}
+																							</span>
+																						),
+																					)}
+																			</div>
+																		)}
+
+																	{imageSrc?.src && (
+																		<div className="flex w-full items-center justify-center">
+																			<Image
+																				src={
+																					imageSrc.src
+																				}
+																				alt={`${slide.kind} visual`}
+																				width={
+																					520
+																				}
+																				height={
+																					520
+																				}
+																				unoptimized={
+																					imageSrc.isGif
+																				}
+																				className="max-h-[420px] max-w-[420px] object-contain"
+																			/>
+																		</div>
+																	)}
+																</div>
+															</div>
+														) : (
+															<div
+																className={cn(
+																	"grid h-full w-full grid-cols-2 gap-4",
+																	isShare
+																		? "pt-6"
+																		: "pt-10",
+																)}
+															>
+																<div
+																	className={cn(
+																		"flex flex-col gap-5",
+																		isShare
+																			? "px-1"
+																			: "",
+																	)}
+																>
+																	{!isShare ? (
+																		<header className="space-y-4">
+																			{disableAnim ? (
+																				<h2 className="text-balance text-5xl font-bold leading-tight sm:text-6xl">
+																					{
+																						slide.title
+																					}
+																				</h2>
+																			) : (
+																				<Scrollytelling.Animation
+																					tween={{
+																						start: slot.start,
+																						end: mid,
+																						fromTo: [
+																							{
+																								opacity: 0,
+																								y: 32,
+																							},
+																							{
+																								opacity: 1,
+																								y: 0,
+																							},
+																						],
+																					}}
+																				>
+																					<h2 className="text-balance text-5xl font-bold leading-tight sm:text-6xl">
+																						{
+																							slide.title
+																						}
+																					</h2>
+																				</Scrollytelling.Animation>
+																			)}
+																			{slide.subtitle ? (
+																				disableAnim ? (
+																					<p
+																						className={cn(
+																							"text-white/80",
+																							isShare
+																								? "text-2xl sm:text-3xl"
+																								: "text-xl",
+																						)}
+																					>
+																						{
+																							slide.subtitle
+																						}
+																					</p>
+																				) : (
+																					<Scrollytelling.Animation
+																						tween={{
+																							start:
+																								slot.start +
+																								(mid -
+																									slot.start) *
+																									0.2,
+																							end: mid,
+																							fromTo: [
+																								{
+																									opacity: 0,
+																									y: 28,
+																								},
+																								{
+																									opacity: 1,
+																									y: 0,
+																								},
+																							],
+																						}}
+																					>
+																						<p
+																							className={cn(
+																								"text-white/80",
+																								isShare
+																									? "text-2xl sm:text-3xl"
+																									: "text-xl",
+																							)}
+																						>
+																							{
+																								slide.subtitle
+																							}
+																						</p>
+																					</Scrollytelling.Animation>
+																				)
+																			) : null}
+																		</header>
+																	) : null}
+
+																	{slide.metrics &&
+																		slide
+																			.metrics
+																			.length >
+																			0 && (
+																			<div
+																				className={cn(
+																					"space-y-3",
+																					isShare
+																						? "col-span-1"
+																						: "",
+																				)}
+																			>
+																				{[
+																					"models",
+																					"datasets",
+																					"spaces",
+																					"papers",
+																				].includes(
+																					slide.kind,
+																				) ? (
+																					<ul className="flex flex-col gap-4">
+																						{slide.metrics.map(
+																							(
+																								metric,
+																								idx,
+																							) => (
+																								<li
+																									key={`${slide.id}-${metric.label}`}
+																									className="group relative flex items-center justify-between gap-4 overflow-hidden rounded-2xl border border-white/12 bg-white/5 px-6 py-5 shadow-lg shadow-black/25 backdrop-blur"
+																									data-story-metric
+																								>
+																									<div className="flex min-w-0 flex-col gap-1">
+																										<p className="truncate text-base font-semibold text-white">
+																											{
+																												metric.label
+																											}
+																										</p>
+																										<p className="text-sm text-white/65">
+																											{
+																												metric.value
+																											}
+																										</p>
+																									</div>
+																									<span className="rounded-full border border-white/20 bg-white/10 px-3.5 py-2 text-[12px] uppercase tracking-wide text-white/80">
+																										#
+																										{idx +
+																											1}
+																									</span>
+																								</li>
+																							),
+																						)}
+																					</ul>
+																				) : isShare ? (
+																					<div className="space-y-3">
+																						<div className="grid grid-cols-1 gap-3">
+																							{(
+																								slide.metrics ??
+																								[]
+																							)
+																								.filter(
+																									(
+																										m,
+																									) =>
+																										m.label ===
+																										"Badge",
+																								)
+																								.map(
+																									(
+																										metric,
+																									) => (
+																										<div
+																											key={
+																												metric.label
+																											}
+																											className="rounded-2xl border border-white/12 bg-white/5 px-6 py-5 shadow-inner shadow-black/10"
+																										>
+																											<p className="text-base uppercase tracking-wide text-white/80">
+																												{
+																													metric.label
+																												}
+																											</p>
+																											<p className="truncate whitespace-nowrap text-2xl font-semibold leading-tight text-white">
+																												{
+																													metric.value
+																												}
+																											</p>
+																										</div>
+																									),
+																								)}
+																						</div>
+																						<div className="grid grid-cols-3 gap-3">
+																							{((
+																								slide.metrics ??
+																								[]
+																							).some(
+																								(
+																									m,
+																								) =>
+																									m.label ===
+																									"Papers",
+																							)
+																								? [
+																										"Papers",
+																										"Downloads",
+																										"Likes",
+																									]
+																								: [
+																										"Repos",
+																										"Downloads",
+																										"Likes",
+																									]
+																							).map(
+																								(
+																									label,
+																								) => {
+																									const metric =
+																										(
+																											slide.metrics ??
+																											[]
+																										).find(
+																											(
+																												m,
+																											) =>
+																												m.label ===
+																												label,
+																										);
+																									if (
+																										!metric
+																									) {
+																										return null;
+																									}
+																									return (
+																										<div
+																											key={
+																												metric.label
+																											}
+																											className="rounded-2xl border border-white/12 bg-white/5 px-6 py-5 shadow-inner shadow-black/10"
+																										>
+																											<p className="truncate text-sm uppercase tracking-wide text-white/75">
+																												{
+																													metric.label
+																												}
+																											</p>
+																											<p className="truncate whitespace-nowrap text-3xl font-semibold text-white">
+																												{ellipsize(
+																													metric.value,
+																													40,
+																												)}
+																											</p>
+																										</div>
+																									);
+																								},
+																							)}
+																						</div>
+																						<div className="space-y-3">
+																							{[
+																								"Top dataset",
+																								"Top model",
+																								"Top space",
+																							].map(
+																								(
+																									label,
+																								) => {
+																									const metric =
+																										(
+																											slide.metrics ??
+																											[]
+																										).find(
+																											(
+																												m,
+																											) =>
+																												m.label ===
+																												label,
+																										);
+																									if (
+																										!metric
+																									) {
+																										return null;
+																									}
+																									return (
+																										<div
+																											key={
+																												metric.label
+																											}
+																											className="rounded-2xl border border-white/12 bg-white/5 px-6 py-5 shadow-inner shadow-black/10"
+																										>
+																											<p className="truncate text-sm uppercase tracking-wide text-white/75">
+																												{
+																													metric.label
+																												}
+																											</p>
+																											<p className="truncate whitespace-nowrap text-2xl font-semibold text-white">
+																												{ellipsize(
+																													metric.value,
+																													40,
+																												)}
+																											</p>
+																										</div>
+																									);
+																								},
+																							)}
+																						</div>
+																					</div>
+																				) : (
+																					<ul className="grid grid-cols-2 gap-4">
+																						{slide.metrics.map(
+																							(
+																								metric,
+																							) => (
+																								<li
+																									key={`${slide.id}-${metric.label}`}
+																									className="group relative overflow-hidden rounded-2xl border border-white/12 bg-white/5 px-6 py-5 shadow-lg shadow-black/25 backdrop-blur"
+																									data-story-metric
+																								>
+																									<p className="truncate text-sm uppercase tracking-wide text-white/70">
+																										{
+																											metric.label
+																										}
+																									</p>
+																									<p className="text-2xl font-semibold text-white">
+																										{
+																											metric.value
+																										}
+																									</p>
+																								</li>
+																							),
+																						)}
+																					</ul>
+																				)}
+																			</div>
+																		)}
+
+																	{filteredHighlights &&
+																		filteredHighlights.filter(
+																			(
+																				item,
+																			) => {
+																				const banned =
+																					[
+																						"gradio",
+																						"en",
+																						"region:us",
+																						"region:eu",
+																						"demo",
+																					];
+																				return !banned.includes(
+																					item.toLowerCase(),
+																				);
+																			},
+																		)
+																			.length >
+																			0 && (
+																			<div className="col-span-2 flex flex-wrap gap-2">
+																				{filteredHighlights
+																					.filter(
+																						(
+																							item,
+																						) => {
+																							const banned =
+																								[
+																									"gradio",
+																									"en",
+																									"region:us",
+																									"region:eu",
+																									"demo",
+																								];
+																							return !banned.includes(
+																								item.toLowerCase(),
+																							);
+																						},
+																					)
+																					.map(
+																						(
+																							item,
+																						) => (
+																							<span
+																								key={
+																									item
+																								}
+																								className={cn(
+																									item.includes(
+																										"huggingface.co/spaces/hf-wrapped/2025",
+																									)
+																										? "truncate bg-transparent px-3 py-0 text-white/90"
+																										: "truncate rounded-full border border-white/20 bg-white/5 shadow-sm shadow-black/20 transition hover:-translate-y-[1px] hover:border-white/35 hover:bg-white/10",
+																									!item.includes(
+																										"huggingface.co/spaces/hf-wrapped/2025",
+																									) &&
+																										(isShare
+																											? "px-2 py-3.5 text-1xl font-semibold text-white"
+																											: "px-4 py-1.5 text-sm font-semibold text-white/90"),
+																								)}
+																								data-story-badge
+																							>
+																								{
+																									item
+																								}
+																							</span>
+																						),
+																					)}
+																			</div>
+																		)}
+																</div>
+
+																<div
+																	className={cn(
+																		"relative flex h-full w-full items-center justify-center",
+																		isShare
+																			? "col-span-1 flex-col items-start justify-start gap-4 px-2"
+																			: mediaLeft
+																				? "order-1"
+																				: "order-2",
+																	)}
+																>
+																	{isShare ? (
+																		<div className="flex w-full max-w-full flex-col gap-4">
+																			<div className="w-full max-w-full overflow-hidden rounded-2xl border border-white/12 bg-white/5 px-5 py-4 text-left text-white shadow-inner shadow-black/10">
+																				<p className="text-sm uppercase tracking-wide text-white/70">
+																					Archetype
+																				</p>
+																				<p className="truncate whitespace-nowrap text-3xl font-semibold leading-tight text-white">
+																					{
+																						(
+																							slide.metrics ??
+																							[]
+																						).find(
+																							(
+																								m,
+																							) =>
+																								m.label ===
+																								"Archetype",
+																						)
+																							?.value
+																					}
+																				</p>
+																			</div>
+																			<div className="flex min-h-[420px] w-full max-w-full items-center justify-center overflow-hidden rounded-2xl border border-transparent bg-transparent px-6 py-6">
+																				{imageSrc?.src ? (
+																					<Image
+																						src={
+																							imageSrc.src
+																						}
+																						alt={`${slide.kind} visual`}
+																						width={
+																							520
+																						}
+																						height={
+																							520
+																						}
+																						unoptimized={
+																							imageSrc.isGif
+																						}
+																						className="h-auto w-full max-w-[440px] object-contain"
+																					/>
+																				) : (
+																					<span className="text-sm text-white/60">
+																						Image
+																						unavailable
+																					</span>
+																				)}
+																			</div>
+																		</div>
+																	) : (
+																		imageSrc?.src && (
+																			<Image
+																				src={
+																					imageSrc.src
+																				}
+																				alt={`${slide.kind} visual`}
+																				width={
+																					520
+																				}
+																				height={
+																					520
+																				}
+																				unoptimized={
+																					imageSrc.isGif
+																				}
+																				className="max-h-[420px] max-w-[420px] object-contain"
+																			/>
+																		)
+																	)}
+																</div>
+															</div>
+														)}
+													</article>
+												</Scrollytelling.Animation>
+											);
+										})}
+									</div>
+								</div>
+							</div>
+						</div>
+					</Scrollytelling.Pin>
+				</Scrollytelling.Root>
+			</div>
+		</div>
+	);
+}

apps/web/modules/marketing/shared/components/Footer.tsx

@@ -0,0 +1,18 @@
+import { config } from "@repo/config";
+import { Logo } from "@shared/components/Logo";
+
+export function Footer() {
+	return (
+		<footer className="border-t py-4 text-foreground/60 text-xs">
+			<div className="container flex flex-wrap items-center justify-between gap-3">
+				<div className="flex items-center gap-3">
+					<Logo className="h-6 w-auto opacity-80 grayscale" />
+					<span>
+						© {new Date().getFullYear()} {config.appName}. Built for
+						the Hugging Face community.
+					</span>
+				</div>
+			</div>
+		</footer>
+	);
+}

apps/web/modules/marketing/shared/components/NavBar.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { LocaleLink, useLocalePathname } from "@i18n/routing";
+import { config } from "@repo/config";
+import { ColorModeToggle } from "@shared/components/ColorModeToggle";
+import { LocaleSwitch } from "@shared/components/LocaleSwitch";
+import { Logo } from "@shared/components/Logo";
+import { Button } from "@ui/components/button";
+import {
+	Sheet,
+	SheetContent,
+	SheetTitle,
+	SheetTrigger,
+} from "@ui/components/sheet";
+import { cn } from "@ui/lib";
+import { MenuIcon } from "lucide-react";
+import { Suspense, useEffect, useState } from "react";
+import { useDebounceCallback } from "usehooks-ts";
+
+export function NavBar() {
+	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+	const localePathname = useLocalePathname();
+	const [isTop, setIsTop] = useState(true);
+
+	const handleMobileMenuClose = () => {
+		setMobileMenuOpen(false);
+	};
+
+	const debouncedScrollHandler = useDebounceCallback(
+		() => {
+			setIsTop(window.scrollY <= 10);
+		},
+		150,
+		{
+			maxWait: 150,
+		},
+	);
+
+	useEffect(() => {
+		window.addEventListener("scroll", debouncedScrollHandler);
+		debouncedScrollHandler();
+		return () => {
+			window.removeEventListener("scroll", debouncedScrollHandler);
+		};
+	}, [debouncedScrollHandler]);
+
+	useEffect(() => {
+		handleMobileMenuClose();
+	}, [localePathname]);
+
+	const menuItems: {
+		label: string;
+		href: string;
+	}[] = [
+		{
+			label: "Wrapped",
+			href: "/#generator",
+		},
+	];
+
+	const isMenuItemActive = (href: string) => localePathname.startsWith(href);
+
+	return (
+		<nav
+			className={cn(
+				"fixed top-0 left-0 z-50 w-full transition-shadow duration-200",
+				!isTop
+					? "bg-card/80 shadow-sm backdrop-blur-lg"
+					: "shadow-none",
+			)}
+			data-test="navigation"
+		>
+			<div className="container">
+				<div
+					className={cn(
+						"flex items-center justify-stretch gap-6 transition-[padding] duration-200",
+						!isTop ? "py-4" : "py-6",
+					)}
+				>
+					<div className="flex flex-1 justify-start">
+						<LocaleLink
+							href="/"
+							className="block hover:no-underline active:no-underline"
+						>
+							<Logo />
+						</LocaleLink>
+					</div>
+
+					<div className="hidden flex-1 items-center justify-center lg:flex">
+						{menuItems.map((menuItem) => (
+							<LocaleLink
+								key={menuItem.href}
+								href={menuItem.href}
+								className={cn(
+									"block px-3 py-2 font-medium text-foreground/80 text-sm",
+									isMenuItemActive(menuItem.href)
+										? "font-bold text-foreground"
+										: "",
+								)}
+								prefetch
+							>
+								{menuItem.label}
+							</LocaleLink>
+						))}
+					</div>
+
+					<div className="flex flex-1 items-center justify-end gap-3">
+						<ColorModeToggle />
+						{config.i18n.enabled && (
+							<Suspense>
+								<LocaleSwitch />
+							</Suspense>
+						)}
+
+						<Sheet
+							open={mobileMenuOpen}
+							onOpenChange={(open) => setMobileMenuOpen(open)}
+						>
+							<SheetTrigger asChild>
+								<Button
+									className="lg:hidden"
+									size="icon"
+									variant="light"
+									aria-label="Menu"
+								>
+									<MenuIcon className="size-4" />
+								</Button>
+							</SheetTrigger>
+							<SheetContent className="w-[280px]" side="right">
+								<SheetTitle />
+								<div className="flex flex-col items-start justify-center">
+									{menuItems.map((menuItem) => (
+										<LocaleLink
+											key={menuItem.href}
+											href={menuItem.href}
+											onClick={handleMobileMenuClose}
+											className={cn(
+												"block px-3 py-2 font-medium text-base text-foreground/80",
+												isMenuItemActive(menuItem.href)
+													? "font-bold text-foreground"
+													: "",
+											)}
+											prefetch
+										>
+											{menuItem.label}
+										</LocaleLink>
+									))}
+								</div>
+							</SheetContent>
+						</Sheet>
+					</div>
+				</div>
+			</div>
+		</nav>
+	);
+}

apps/web/modules/marketing/shared/components/NotFound.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { LocaleLink } from "@i18n/routing";
+import { Button } from "@ui/components/button";
+import { UndoIcon } from "lucide-react";
+
+export function NotFound() {
+	return (
+		<div className="flex h-screen flex-col items-center justify-center">
+			<h1 className="font-bold text-5xl">404</h1>
+			<p className="mt-2 text-2xl">Page not found</p>
+
+			<Button asChild className="mt-4">
+				<LocaleLink href="/">
+					<UndoIcon className="mr-2 size-4" /> Go to homepage
+				</LocaleLink>
+			</Button>
+		</div>
+	);
+}

apps/web/modules/shared/components/ClientProviders.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ProgressProvider } from "@bprogress/next/app";
+import { config } from "@repo/config";
+import { Toaster } from "@ui/components/toast";
+import { ThemeProvider } from "next-themes";
+import type { PropsWithChildren } from "react";
+
+export function ClientProviders({ children }: PropsWithChildren) {
+	return (
+		<ProgressProvider
+			height="4px"
+			color="var(--color-primary)"
+			options={{ showSpinner: false }}
+			shallowRouting
+			delay={250}
+		>
+			<ThemeProvider
+				attribute="class"
+				disableTransitionOnChange
+				enableSystem
+				defaultTheme={config.ui.defaultTheme}
+				themes={config.ui.enabledThemes}
+			>
+				{children}
+
+				<Toaster position="top-right" />
+			</ThemeProvider>
+		</ProgressProvider>
+	);
+}

apps/web/modules/shared/components/ColorModeToggle.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Button } from "@ui/components/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuTrigger,
+} from "@ui/components/dropdown-menu";
+import { HardDriveIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+import { useIsClient } from "usehooks-ts";
+
+export function ColorModeToggle() {
+	const { resolvedTheme, setTheme, theme } = useTheme();
+	const [value, setValue] = useState<string>(theme ?? "system");
+	const isClient = useIsClient();
+
+	const colorModeOptions = [
+		{
+			value: "system",
+			label: "System",
+			icon: HardDriveIcon,
+		},
+		{
+			value: "light",
+			label: "Light",
+			icon: SunIcon,
+		},
+		{
+			value: "dark",
+			label: "Dark",
+			icon: MoonIcon,
+		},
+	];
+
+	if (!isClient) {
+		return null;
+	}
+
+	return (
+		<DropdownMenu modal={false}>
+			<DropdownMenuTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					data-test="color-mode-toggle"
+					aria-label="Color mode"
+				>
+					{resolvedTheme === "light" ? (
+						<SunIcon className="size-4" />
+					) : (
+						<MoonIcon className="size-4" />
+					)}
+				</Button>
+			</DropdownMenuTrigger>
+
+			<DropdownMenuContent>
+				<DropdownMenuRadioGroup
+					value={value}
+					onValueChange={(value) => {
+						setTheme(value);
+						setValue(value);
+					}}
+				>
+					{colorModeOptions.map((option) => (
+						<DropdownMenuRadioItem
+							key={option.value}
+							value={option.value}
+							data-test={`color-mode-toggle-item-${option.value}`}
+						>
+							<option.icon className="mr-2 size-4 opacity-50" />{" "}
+							{option.label}
+						</DropdownMenuRadioItem>
+					))}
+				</DropdownMenuRadioGroup>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

apps/web/modules/shared/components/Document.tsx

@@ -0,0 +1,34 @@
+import { ClientProviders } from "@shared/components/ClientProviders";
+import { cn } from "@ui/lib";
+import { Geist } from "next/font/google";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+import type { PropsWithChildren } from "react";
+
+const sansFont = Geist({
+	weight: ["400", "500", "600", "700"],
+	subsets: ["latin"],
+	variable: "--font-sans",
+});
+
+export async function Document({
+	children,
+	locale,
+}: PropsWithChildren<{ locale: string }>) {
+	return (
+		<html
+			lang={locale}
+			suppressHydrationWarning
+			className={sansFont.className}
+		>
+			<body
+				className={cn(
+					"min-h-screen bg-background text-foreground antialiased",
+				)}
+			>
+				<NuqsAdapter>
+					<ClientProviders>{children}</ClientProviders>
+				</NuqsAdapter>
+			</body>
+		</html>
+	);
+}

apps/web/modules/shared/components/LocaleSwitch.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { updateLocale } from "@i18n/lib/update-locale";
+import { useLocalePathname, useLocaleRouter } from "@i18n/routing";
+import { config } from "@repo/config";
+import type { Locale } from "@repo/i18n";
+import { Button } from "@ui/components/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuTrigger,
+} from "@ui/components/dropdown-menu";
+import { LanguagesIcon } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useLocale } from "next-intl";
+import { useState } from "react";
+
+const { locales } = config.i18n;
+
+export function LocaleSwitch({
+	withLocaleInUrl = true,
+}: {
+	withLocaleInUrl?: boolean;
+}) {
+	const localeRouter = useLocaleRouter();
+	const localePathname = useLocalePathname();
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const currentLocale = useLocale();
+	const [value, setValue] = useState<string>(currentLocale);
+
+	return (
+		<DropdownMenu modal={false}>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" size="icon" aria-label="Language">
+					<LanguagesIcon className="size-4" />
+				</Button>
+			</DropdownMenuTrigger>
+
+			<DropdownMenuContent>
+				<DropdownMenuRadioGroup
+					value={value}
+					onValueChange={(value) => {
+						setValue(value);
+
+						if (withLocaleInUrl) {
+							localeRouter.replace(
+								`${localePathname}?${searchParams.toString()}`,
+								{
+									locale: value,
+								},
+							);
+						} else {
+							updateLocale(value as Locale);
+							router.refresh();
+						}
+					}}
+				>
+					{Object.entries(locales).map(([locale, { label }]) => {
+						return (
+							<DropdownMenuRadioItem key={locale} value={locale}>
+								{label}
+							</DropdownMenuRadioItem>
+						);
+					})}
+				</DropdownMenuRadioGroup>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

apps/web/modules/shared/components/Logo.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@ui/lib";
+
+export function Logo({
+	withLabel = true,
+	className,
+}: {
+	className?: string;
+	withLabel?: boolean;
+}) {
+	return (
+		<span
+			className={cn(
+				"flex items-center font-semibold text-foreground leading-none",
+				className,
+			)}
+		>
+			<svg className="size-10 text-primary" viewBox="0 0 734 635">
+				<title>acme</title>
+				<path
+					opacity="0.2"
+					d="M282.102 232.435C328.904 205.42 404.785 205.42 451.588 232.435L697.946 374.634C744.748 401.648 744.748 445.447 697.946 472.462L451.588 614.661C404.785 641.676 328.904 641.676 282.102 614.661L35.7432 472.462C-11.059 445.447 -11.0589 401.648 35.7432 374.634L282.102 232.435Z"
+					fill="currentColor"
+				/>
+				<path
+					opacity="0.4"
+					d="M282.102 126.674C328.904 99.66 404.785 99.66 451.588 126.674L697.946 268.874C744.748 295.888 744.748 339.687 697.946 366.702L451.588 508.901C404.785 535.915 328.904 535.915 282.102 508.901L35.7432 366.702C-11.059 339.687 -11.0589 295.888 35.7432 268.874L282.102 126.674Z"
+					fill="currentColor"
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M451.588 20.9141C404.785 -6.10027 328.904 -6.1003 282.102 20.9141L35.7432 163.113C-11.0589 190.128 -11.059 233.927 35.7432 260.941L282.102 403.141C328.904 430.155 404.785 430.155 451.588 403.141L697.946 260.941C744.748 233.927 744.748 190.128 697.946 163.113L451.588 20.9141ZM497.704 114.921C499.134 115.855 500.121 117.04 500.545 118.332C505.138 132.238 505.138 143.12 505.072 154.003C505.072 198.349 468.453 225.167 420.48 245.161V290.25C420.485 294.097 418.849 297.868 415.755 301.141C412.662 304.413 408.233 307.058 402.967 308.777L337.739 330.105C335.32 330.893 332.634 331.263 329.935 331.181C327.236 331.1 324.613 330.569 322.316 329.64C320.019 328.71 318.124 327.412 316.809 325.87C315.495 324.327 314.806 322.591 314.806 320.825V275.982L299.957 285.686C297.993 286.969 295.661 287.987 293.095 288.682C290.529 289.377 287.779 289.734 285.001 289.734C282.223 289.734 279.473 289.377 276.907 288.682C274.341 287.987 272.009 286.969 270.045 285.686L236.407 263.7C232.442 261.109 230.214 257.594 230.214 253.93C230.214 250.265 232.442 246.751 236.407 244.159L251.257 234.456H182.678C179.975 234.457 177.316 234.006 174.955 233.147C172.593 232.288 170.607 231.049 169.184 229.547C167.761 228.046 166.949 226.331 166.825 224.567C166.701 222.803 167.269 221.047 168.475 219.466L201.136 176.8C203.771 173.364 207.817 170.475 212.82 168.455C217.823 166.435 223.587 165.364 229.468 165.36H298.331C328.857 133.922 369.765 110.084 437.967 110.084C454.555 110.084 471.202 110.084 492.483 113.064C494.46 113.341 496.273 113.986 497.704 114.921ZM405.86 179.723C410.207 181.621 415.318 182.634 420.546 182.634C427.557 182.634 434.281 180.814 439.239 177.575C444.196 174.335 446.981 169.942 446.981 165.36C446.981 161.944 445.431 158.604 442.526 155.763C439.622 152.923 435.493 150.709 430.663 149.401C425.832 148.094 420.517 147.752 415.389 148.418C410.261 149.085 405.551 150.73 401.854 153.146C398.157 155.562 395.639 158.64 394.619 161.99C393.599 165.341 394.123 168.814 396.124 171.971C398.124 175.127 401.513 177.825 405.86 179.723Z"
+					fill="currentColor"
+				/>
+			</svg>
+			{withLabel && (
+				<span className="ml-3 hidden text-lg md:block">acme</span>
+			)}
+		</span>
+	);
+}

apps/web/modules/shared/components/Spinner.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@ui/lib";
+import { Loader2Icon } from "lucide-react";
+
+export function Spinner({ className }: { className?: string }) {
+	return (
+		<Loader2Icon
+			className={cn("size-4 animate-spin text-primary", className)}
+		/>
+	);
+}

apps/web/modules/ui/components/avatar.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@ui/lib";
+import * as React from "react";
+
+const Avatar = ({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) => (
+	<AvatarPrimitive.Root
+		className={cn(
+			"relative flex h-8 w-8 shrink-0 overflow-hidden rounded-sm",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const AvatarImage = ({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) => (
+	<AvatarPrimitive.Image
+		className={cn("aspect-square h-full w-full rounded-sm", className)}
+		{...props}
+	/>
+);
+
+const AvatarFallback = ({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) => (
+	<AvatarPrimitive.Fallback
+		className={cn(
+			"flex h-full w-full items-center justify-center rounded-sm bg-muted font-bold text-xs",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+export { Avatar, AvatarFallback, AvatarImage };

apps/web/modules/ui/components/button.tsx

@@ -0,0 +1,67 @@
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { Spinner } from "@shared/components/Spinner";
+import { cn } from "@ui/lib";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+
+const buttonVariants = cva(
+	"flex items-center justify-center border font-medium enabled:cursor-pointer transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&>svg]:mr-1.5 [&>svg]:opacity-60 [&>svg+svg]:hidden",
+	{
+		variants: {
+			variant: {
+				primary:
+					"border-transparent bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm shadow-primary/20",
+				error: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline:
+					"border-secondary/15 bg-transparent text-secondary hover:bg-secondary/10",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90",
+				light: "border-transparent bg-secondary/5 text-foreground hover:bg-secondary/10",
+				ghost: "border-transparent text-primary hover:bg-primary/10 hover:text-primary",
+				link: "border-transparent text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				md: "h-9 rounded-md px-4 text-sm",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-11 rounded-md px-6 text-base",
+				icon: "size-9 rounded-md [&>svg]:m-0 [&>svg]:opacity-100",
+			},
+		},
+		defaultVariants: {
+			variant: "secondary",
+			size: "md",
+		},
+	},
+);
+
+export type ButtonProps = {
+	asChild?: boolean;
+	loading?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+	VariantProps<typeof buttonVariants>;
+
+const Button = ({
+	className,
+	children,
+	variant,
+	size,
+	asChild = false,
+	loading,
+	disabled,
+	...props
+}: ButtonProps) => {
+	const Comp = asChild ? Slot : "button";
+	return (
+		<Comp
+			className={cn(buttonVariants({ variant, size, className }))}
+			disabled={disabled || loading}
+			{...props}
+		>
+			{loading && <Spinner className="mr-1.5 size-4 text-inherit" />}
+			<Slottable>{children}</Slottable>
+		</Comp>
+	);
+};
+
+export { Button, buttonVariants };

apps/web/modules/ui/components/dropdown-menu.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@ui/lib";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = ({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) => (
+	<DropdownMenuPrimitive.SubTrigger
+		className={cn(
+			"flex cursor-default select-none items-center rounded-md px-3 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
+			inset ? "pl-8" : "",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRightIcon className="ml-auto size-4" />
+	</DropdownMenuPrimitive.SubTrigger>
+);
+
+const DropdownMenuSubContent = ({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => (
+	<DropdownMenuPrimitive.SubContent
+		className={cn(
+			"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const DropdownMenuContent = ({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg",
+				"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in",
+				className,
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
+);
+
+const DropdownMenuItem = ({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+}) => (
+	<DropdownMenuPrimitive.Item
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-md px-3 py-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			inset ? "pl-8" : "",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const DropdownMenuCheckboxItem = ({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => (
+	<DropdownMenuPrimitive.CheckboxItem
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-md py-3 pr-3 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex size-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<CheckIcon className="size-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.CheckboxItem>
+);
+
+const DropdownMenuRadioItem = ({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) => (
+	<DropdownMenuPrimitive.RadioItem
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-md py-2 pr-8 pl-3 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-[state=checked]:font-semibold data-disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute right-2 flex size-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<CheckIcon className="size-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+);
+
+const DropdownMenuLabel = ({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) => (
+	<DropdownMenuPrimitive.Label
+		className={cn(
+			"px-3 py-2 font-semibold text-sm",
+			inset ? "pl-8" : "",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const DropdownMenuSeparator = ({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => (
+	<DropdownMenuPrimitive.Separator
+		className={cn("-mx-1 my-1 h-px bg-border", className)}
+		{...props}
+	/>
+);
+
+const DropdownMenuShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest opacity-60",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+export {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+};

apps/web/modules/ui/components/input.tsx

@@ -0,0 +1,19 @@
+import { cn } from "@ui/lib";
+import React from "react";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = ({ className, type, ...props }: InputProps) => {
+	return (
+		<input
+			type={type}
+			className={cn(
+				"flex h-9 w-full rounded-md bg-card shadow-xs border border-input px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-foreground/60 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:border-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+export { Input };

apps/web/modules/ui/components/sheet.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cn } from "@ui/lib";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = ({ ...props }: SheetPrimitive.DialogPortalProps) => (
+	<SheetPrimitive.Portal {...props} />
+);
+
+const SheetOverlay = ({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) => (
+	<SheetPrimitive.Overlay
+		className={cn(
+			"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-background/80 backdrop-blur-xs data-[state=closed]:animate-out data-[state=open]:animate-in",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const sheetVariants = cva(
+	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+	{
+		variants: {
+			side: {
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	},
+);
+
+type SheetContentProps = {} & React.ComponentProps<
+	typeof SheetPrimitive.Content
+> &
+	VariantProps<typeof sheetVariants>;
+
+const SheetContent = ({
+	side = "right",
+	className,
+	children,
+	...props
+}: SheetContentProps) => (
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Content
+			className={sheetVariants({ side, className })}
+			{...props}
+		>
+			{children}
+			<SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+				<XIcon className="size-4" />
+				<span className="sr-only">Close</span>
+			</SheetPrimitive.Close>
+		</SheetPrimitive.Content>
+	</SheetPortal>
+);
+
+const SheetHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col space-y-2 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const SheetFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const SheetTitle = ({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) => (
+	<SheetPrimitive.Title
+		className={cn("font-semibold text-foreground text-lg", className)}
+		{...props}
+	/>
+);
+
+const SheetDescription = ({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) => (
+	<SheetPrimitive.Description
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
+);
+
+export {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
+};

apps/web/modules/ui/components/toast.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = "system" } = useTheme();
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			toastOptions={{
+				classNames: {
+					toast: "group toast !rounded-lg !font-sans group-[.toaster]:bg-card group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-md",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton:
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton:
+						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+					success: "!text-success",
+					error: "!text-destructive",
+				},
+				duration: 5000,
+			}}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };

apps/web/modules/ui/lib/index.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

apps/web/next.config.ts

@@ -0,0 +1,27 @@
+import type { NextConfig } from "next";
+import nextIntlPlugin from "next-intl/plugin";
+
+const withNextIntl = nextIntlPlugin("./modules/i18n/request.ts");
+
+const nextConfig: NextConfig = {
+	transpilePackages: [
+		"@repo/config",
+		"@repo/i18n",
+		"@repo/utils",
+		"@repo/wrapped",
+	],
+	images: {
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "lh3.googleusercontent.com",
+			},
+			{
+				protocol: "https",
+				hostname: "avatars.githubusercontent.com",
+			},
+		],
+	},
+};
+
+export default withNextIntl(nextConfig);