Class Websites — Technique Demos

Hero Sections

Full-screen responsive hero, pixel-perfect, single-file React+Tailwind.

Hero Sections

Video-agency hero: looping video bg, Barlow + Instrument Serif italic headline, play-icon workreel pill CTA

Hero Sections

create a landing page for Pepsi campaign, with video in the background of the hero section.

Hero Sections

Master Prompt Architecture: Cortex AI Hero Section — 5-phase engineering-grade prompt doc (pure-black env + 800px…

Hero Sections

Build a fullscreen hero section 'Orbis.Nft' (React/TS/Tailwind/Vite): background video with a MOUSE-SCRUB effect…

Hero Sections

Cinematic EV landing in pure black with orange-glow icon grid, 110px stacked mega-links, video sections

Hero Sections

Centered 3:4 liquid-glass card with video inside, gradient-border mask trick, over a full-screen image hero

Hero Sections

Video hero with word-by-word BlurText headline animation, liquid-glass nav pills, waitlist email capture

Hero Sections

Build a single-page WebGL hero for a creative agency 'Axion Studio' (React/TS/Tailwind/lucide-react + shaders/rea…

Hero Sections

100vh F1 racing hero: maroon announcement banner, rounded masked video panel, cream palette, fade-up titles

Hero Sections

Dark finance hero rebuilt from pasted Figma div-soup ('bad code') with Inter + Instrument Serif headline

Hero Sections

can you create something like this with the animation and the video in the backrground?

Hero Sections

Create a single-page hero section with a fullscreen looping background video, glassmorphic navigation, and cinema…

Hero Sections

Black agency landing with two-tier liquid-glass system, Instrument Serif italic headings, hls.js video bgs

Scroll & Storytelling

Scrollytelling isometric 3D diorama morphing through five construction phases with annotation pins

Scroll & Storytelling

Space-exploration page whose fixed background video scrubs in sync with scroll; fly-up nav hover text

Scroll & Storytelling

Recreate the scroll-scrubbed cinematic 'tea leaf journey' from the tea-leaf-scroll-world repo: scroll position scrubs video transitions (with still-image crossfade fallbacks) through six narrated chapters from mountain valley to tea ceremony, with chapter rail, progress bar, and preload/buffering indicator

3D & WebGL

3-planet site (Mercury/Venus/Mars routes): fixed R3F textured spheres driven by Motion useScroll transforms behind HTML sections

3D & WebGL

Retro-futurist 'MCP-2099' platform: GLSL data globe, holographic WebGL loader, GSAP UI, theme repaint

3D & WebGL

Dark-fantasy ARPG: class-select screen with stat bars, then isometric Three.js click-to-move combat with HUD.

3D & WebGL

Hologram-particles effect replicated from cortiz2894's repo with React Three Fiber, Drei and Leva

3D & WebGL

A WebGPU (motion-gpu FragCanvas, WGSL) raymarched rotating rocky planet with rim lighting and atmosphere, click-triggered expanding/bouncing ripple shockwaves (up to 12 concurrent), and audio-reactive atmosphere glow with a track upload/play panel

Interaction & Animation

Single-screen SaaS hero: fullscreen looping bg video with overlay, staggered framer-motion fade-up copy and pill CTAs

Interaction & Animation

Recreate a cursor-following delayed radial-mask reveal that shows a Floyd-Steinberg dithered black-and-white layer over a full-color desert image, with soft-edged circle, lag, and fade-out on mouse leave, from a reference video

Interaction & Animation

GSAP carousel: clicked card tweens to fullscreen bg, thumbnail row re-stacks, masked title reveals, numbered progress pagination

Interaction & Animation

Fullscreen smoothie slider: wheel-paged Framer Motion flavor swaps with split headline and spinning bowl art.

Interaction & Animation

Brand-studio landing: fullscreen looping video hero under a gradient vignette with giant Anton display type.

Interaction & Animation

Single-file vanilla WebGL cloth-sim paper receipt you grab and drag, texture drawn on a canvas

Interaction & Animation

Recreate the 'Globe Express' travel-destination card carousel where clicking a small card expands its image with an animation to fill the full-screen background, with staged title/description reveal and arrow navigation, from a reference video

Full Landing Pages

ASTRA VOYAGE space-tourism page: looping video in every section, no static images, slow sci-fi drift

Full Landing Pages

3D cell studio: R3F organelle viewer plus Tripo image-to-3D server routes (upload, task polling, GLB load)

Full Landing Pages

Two-page dark architect portfolio: Orbitron display type, video vignettes, mono spec lists, glass cards

Full Landing Pages

WISA football-org landing: scroll-driven video bg, fly-in/out nav text, GSAP + Tailwind v4, glass footer

Full Landing Pages

Two-page noir Madrid city guide: Gran Via video hero, barrio detail page, mono quick-fact spec lists

Full Landing Pages

'NEON OIRAN' cyber-geisha RPG site cloned quirks-and-all (misspelled brand, odd dot count), GSAP scroll

AI-Embedded Sites

Spanish-language San Sebastian things-to-do page with an embedded ElevenLabs ConvAI agent

AI-Embedded Sites

Madrid tourism landing with an embedded ElevenLabs ConvAI voice-agent widget

AI-Embedded Sites

Madrid tourist page built around an ElevenLabs ConvAI chatbot embed

AI-Embedded Sites

Tourism-guide company site with an ElevenLabs voice guide agent embedded

Scroll & Storytelling

Cinematic space-station site ('Engineering The Orbital Frontier') whose hero is a 272-frame scroll-scrubbed canvas image sequence with GSAP mouse parallax, blur-reveal headlines, and a pinned tilt-in panel showcasing an auto-rotating .glb station in model-viewer.

AI-Embedded Sites

Iron-Man-style JARVIS HUD that overlays your live webcam feed with MediaPipe vision tracking, a React Three Fiber holographic globe, sci-fi tracking overlays, and a Web Speech voice-command interface with on-screen command feedback.

Full Landing Pages

ZenTravel 'Cheap Trips to Japan' travel landing page: SEO meta via react-helmet-async, cherry-blossom hero, landmark cards, reviews, footer, and a floating travel-guide chat widget built on Gemini-style user/model chat roles (responses currently stubbed).

Interaction & Animation

'Sky Popper' webcam hand-tracking game: MediaPipe Hands (loaded from CDN) drives a crosshair from your index finger and a thumb-index pinch shoots canvas-drawn balloons, with pop particles, combo multipliers, calibration overlay, difficulty and sensitivity settings, and a mouse fallback.

3D & WebGL

'Cosmos.' generative-planet studio: 25,000-instance voxel planets built in React Three Fiber — Earth sampled from a real texture map, gas giants from simplex noise — with cursor-repulsion swirl on the voxels, bloom postprocessing, parallax starfields, and live sliders for noise scale, amplitude, water level, and seed.

3D & WebGL

'Solar Explorer — in only Three.js': a full-screen planet browser that travels from Mercury to Pluto with cinematic 2.2s camera transitions, a distance-labeled planet sidebar, gradient-shaded planet dots, and letterspaced sci-fi typography fading in per planet.

Hero Sections

AI-skincare hero built around a full-bleed autoplaying face-scan video, overlaid with drifting corner-bracket 'scan boxes' labeling skin concerns (oiliness, fine lines, pores), count-up stat blocks, a trust badge, and staggered framer-motion entrances — followed by an AI Skincare split section and mission block.

Hero Sections

Full-screen looping background-video hero for a fictional racing game (GAMERLIX), with an open center stage for the video and framer-motion staggered hover-lift footer cards.

Hero Sections

videoreport.ai email-capture hero over a CDN-hosted background video that uses a requestAnimationFrame opacity crossfade near the clip's end to hide the loop seam.

3D & WebGL

videoreport.ai multi-section landing built around a fixed react-three-fiber DamagedHelmet GLB that lerps through scroll-keyframed position/rotation/scale with pointer parallax while content sections pass over it.

AI-Embedded Sites

Google AI Studio export of Popstop — a Gemini-powered (@google/genai) mobile app that listens to microwave popcorn pops via the mic — uploaded as tmp/popstop_1.zip; the rendered page is still the blank Lovable starter awaiting integration.

AI-Embedded Sites

Second staging attempt of the same Google AI Studio Popstop export (Gemini-powered popcorn pop-listening app) uploaded as tmp/popstop_1.zip; the rendered page is still the blank Lovable starter.

Scroll & Storytelling

Popstop launch landing page whose sticky hero video is scrubbed by scroll position (scroll maps to video.currentTime) with named beat-jump buttons, a draggable progress meter, a play-with-sound escape hatch, and three story cards narrating bag-guesses -> phone-listens -> warning-hits.

Interaction & Animation

Six-screen Popstop mobile app prototype (Welcome, Home with wattage picker, Listening, Alert, History, Settings) with an animated live waveform, big tabular pop counter, decaying intensity meter, and simulated pop-detection phases.

Hero Sections

Frosted-glass hero: pointer-parallax backdrop-filter panes with live blur/opacity sliders and fallback mode.

3D & WebGL

Three.js example — fetches a source and rebuilds it as a 3D scene.

Interaction & Animation

Animated page with moving curtains made of letters — typographic motion as the main effect.

Full Landing Pages

Pixel-perfect recreation of a page from a screenshot reference.

AI-Embedded Sites

AI-powered studio UI that builds native iOS apps from natural-language prompts — built via loop design in Claude Code.

Data Visualization & Journalism

Labour research data synthesized into an interactive Spanish visualization framework.

Data Visualization & Journalism

Long-form data-journalism piece: government policy impact on quality of life in Spain, 2018–2026.

Full Landing Pages

Personal portfolio site — used in class as the portfolio example: structure, self-presentation and how work is showcased.

3D & WebGL

3D BMX downhill racer in Three.js: an IK-rigged rider on a full bike with suspension, and a trick system (Superman, backflip, tailwhip, X-up).

3D & WebGL

Tactical first-person shooter in Three.js with AI squadmates — a full game engine booted inside a web page.

3D & WebGL

Complete browser FPS in a single HTML file: no build step, no assets — everything generated at runtime.

3D & WebGL

A small, soft physics world: wander, hop and stretch a 7 cm jelly baby across a wooden tabletop.

3D & WebGL

Interactive Three.js experience with sculpted dumplings: pick up, dip and bite animations, steam effects and a built-in recorder.

Scroll & Storytelling

Scroll-driven five-chapter night walk through a Kyoto mountain temple, rendered live in 3D: lantern light, fog, rain and a vermilion moon.

Interaction & Animation

Interactive library of seven clothbound volumes: pull a book into detail view, orbit the binding, drag through curved pages.

Full Landing Pages

Pie-shop site rebuilt around a circular flavor dial for browsing the menu, in a dark-green brand theme.

Hero Sections

Dark e-commerce hero for a juice brand: full-bleed video with mix-blend-screen and an animated floating ingredient-card stack.