FAQ

What framework powers this site?

Next.js 16 using the App Router. Pages are React Server Components by default, with 'use client' added only where interactivity is needed — keeping the JavaScript bundle as small as possible.

How is the site styled?

Tailwind CSS v4, which uses a CSS-first configuration (no tailwind.config.ts file). The entire design is dark-mode-only. Custom utilities like the frosted-glass card effect are defined directly in globals.css using Tailwind's @layer directive.

What drives the animations?

Framer Motion. It handles the tile exit animations on the reveal engine, the card entrance/exit transitions, the draggable question and mastered cards, the progress pip spring bounce, and the green flash that fires when a tile is uncovered.

How does the image-reveal learning game work?

Each image is covered by six absolutely-positioned blurred panels arranged in a 2×3 grid. When you answer a question correctly, one panel is removed via an animated exit. The base image is always rendered underneath at full quality — only the overlay tiles are blurred. Once all six are gone the full image fades to full brightness.

How is game progress stored?

Entirely in the browser using localStorage (key: jr-reveal-session). No account or backend is needed. Progress persists across browser closes and is only cleared when you press the Reset button in the navigation bar.

How does the question queue and difficulty weighting work?

Questions you answer incorrectly are placed at the front of the next round's queue, so they come up again sooner. Questions you've answered correctly are shuffled to the back. This is implemented in the useRevealSession hook using a Fisher-Yates shuffle applied to each group separately.

Where does the content (questions and answers) come from?

All content lives in a single JSON file at data/content.json. Each entry is an imageSet with an id, image path, category label, description, and an array of questions with multiple-choice answers and per-answer explanations. Adding a new topic is as simple as adding a new object to that array.

What icons are used?

Lucide React — a clean, consistent open-source icon library with a minimalist line style. Every icon in the nav, buttons, and feedback panels comes from Lucide.

How is the site deployed?

Vercel. The Next.js build is run on each push, environment variables (API keys, timing config) are set in the Vercel dashboard, and edge caching handles static assets. Zero server management required.

Are there any configurable settings?

Yes — several timing values are controlled via environment variables so they can be tuned without a code change: NEXT_PUBLIC_CORRECT_ANSWER_DELAY_MS (how long to show correct-answer feedback before advancing), NEXT_PUBLIC_WRONG_ANSWER_DELAY_MS (auto-advance delay after a wrong answer), and NEXT_PUBLIC_MASTERED_DELAY_MS (pause between full image reveal and the Mastered overlay appearing).

Was AI used to help build this?

Yes. GitHub Copilot (powered by Claude Sonnet) was used as an AI pair programmer throughout — scaffolding the project, implementing components, debugging issues, and iterating on UX.