Technology Stack
Next.js, TypeScript, Tailwind CSS, Framer Motion, React Hook Form, Zod, React Intersection Observer, Vercel
Overview
Duration: 4/2024 - 5/2024
A landing page selling an online course that teaches people to turn their own photos into cinematic AI evolution videos. The audience is non-technical and arriving mostly from paid social, which sets the whole brief: the page has to explain an unfamiliar capability in seconds, prove it visually, and capture the lead before attention runs out.
The central decision is that the product is shown, not explained. Nothing on the page describes what an evolution video looks like — it plays one. Written explanation is used only for the objections that a demonstration cannot answer.
Demonstrating the Product
- Before-and-after comparison — the source photo against the finished video, side by side, which is the single highest-converting element on the page
- Live examples of photo-to-video transformations, autoplaying muted so they start without an interaction
- Stage-by-stage preview — the process broken into visible steps, so a prospect understands what they will be learning to do
- Plain-language explanation of the underlying technique for the visitors who want it, kept below the demonstration rather than in front of it
- Use case scenarios — the occasions people actually make these for, which is what turns interest into intent
Motion & Experience
- Scroll-driven reveals through Framer Motion, choreographed section by section so the page unfolds as a narrative rather than animating everything on load
- Micro-interactions giving immediate feedback on every interactive element
- A deliberate scroll journey — problem, demonstration, proof, price, objection handling — with CTA placement at each decision point
- Responsive across every breakpoint, with the mobile layout treated as primary given the traffic source
Conversion Flow
- Low-friction lead capture — the minimum number of fields that still produces a usable lead, placed at multiple scroll depths
- Client and server validation through React Hook Form and Zod sharing one schema, so the rules cannot drift apart
- Social proof — testimonials and outcomes from course participants
- Clear pricing tiers with the differences between packages made legible at a glance
- FAQ section targeted at the specific hesitations that block a course purchase: time required, skill level, tooling cost, and what happens if it does not work
Technical Implementation
- Server Components for the static shell, keeping the initial payload small
- Client-side motion isolated to the components that need it, so animation cost does not spread across the page
- Intersection Observer driving both scroll animation and media lazy-loading, so videos below the fold cost nothing until they are approached
- Compressed, correctly-sized media — the single biggest lever on a page whose value proposition is video
- TypeScript throughout
- Modular Tailwind theming with custom extensions rather than inline values
- Structured metadata and semantic heading hierarchy for search and social sharing
- Event tracking on every CTA and scroll milestone, so the funnel can be measured and iterated against real traffic
This build shows how to sell an unfamiliar technical product to a non-technical audience: demonstrate it immediately, keep the page fast enough that paid traffic actually reaches the demonstration, and instrument the funnel so the next iteration is driven by data rather than opinion.