72 resources

WebGL Prompts and Templates

Explore WebGL AI prompts, video prompts, and landing page templates from Prompt Studio.

Browse this tag by category

3D Photography Portfolio with Video Projections on Surfaces

Build an elegant, silent 3D photography portfolio with video projections on fabric panels and walls. **Deliverables:** index.html, styles.css, photo3d.js, assets/ folder. **Stack:** Three.js, video textures, CSS grid for UI. **Description:** 3D surfaces (fabric panels, walls) that project photographic videos; hovering expands the projection and the camera performs a smooth pan. Elegant and silent aesthetic. **Key interactions:** Hover to expand, click for fullscreen, clip scrubbing. **Accessibility & fallback:** 2D gallery with captions and subtitles. **Recommended assets:** 4–12s clips, fabric textures, panel models.

Landing Pages

SaaS

3D SaaS Product Experience with Integrated Video Demo

Build a minimal, elegant 3D SaaS product experience with an integrated video demo that guides the camera through the mockup. **Deliverables:** index.html, styles.css, product3d.js, assets/ folder. **Stack:** Three.js, video textures, GSAP. **Description:** 3D panel containing a product mockup; activating "Play demo" plays a synchronized video that guides the camera through the mockup and highlights features with luminous halos. Minimal and elegant design. **Key interactions:** Play/pause demo, hotspots with microvideos, subtitles. **Accessibility & fallback:** 2D demo video and transcript. **Recommended assets:** 90s demo video, GLB models of UI.

3D Financial Data Visualizer with Video Insights

Landing Pages

finance

3D Financial Data Visualizer with Video Insights

Build a 3D financial data visualizer with floating KPI widgets and synchronized video insights. **Deliverables:** index.html, styles.css, finance3d.js, assets/ folder. **Stack:** Three.js, D3.js, HTML5 video. **Description:** Floating 3D widgets displaying KPIs; selecting a widget plays a video insight with analysis and the visualization animates to illustrate the narrative. Sober palette and geometric typography. **Key interactions:** Compare periods with split camera, synchronized scrubbing of video and data. **Accessibility & fallback:** Tables and videos with subtitles. **Recommended assets:** 60–120s explanatory videos, JSON datasets.

Landing Pages

conference

3D Conference Room with Live Streaming and Highlight Clips

Build an elegant 3D conference room for events featuring a live stream on the central screen, highlight clips on side screens, and a virtual audience. **Deliverables:** index.html, styles.css, conference.js, assets/ folder. **Stack:** Three.js, HLS/WebRTC, video textures, postprocessing. **Description:** Elegant 3D room for events: the main stream appears on the central screen; highlight clips play on side screens with smooth transitions. Virtual audience with subtle animations. **Key interactions:** Choose camera angle, play clips, mark key moments. **Accessibility & fallback:** Live subtitles, 2D version of the stream. **Recommended assets:** HLS streams, highlight clips, room models.

Landing Pages

corporate

3D Corporate Timeline with Animated Dioramas and Video Narration

Build a 3D corporate timeline with elegant animated dioramas and narrated video at each milestone. **Deliverables:** index.html, styles.css, timeline3d.js, assets/ folder. **Stack:** Three.js, HTML5 video, ScrollTrigger. **Description:** 3D timeline with elegant dioramas; upon reaching each milestone a narrated video plays and the camera pans with cinematic easing. Serif typography for titles. **Key interactions:** Keyboard navigation between milestones, timeline scrubbing, subtitles. **Accessibility & fallback:** Transcripts and linear version with videos. **Recommended assets:** 60–120s narrated clips, diorama models.

Landing Pages

luxury

Luxury 3D Showroom with Product Video and Microanimations

Build a luxury 3D showroom with a pedestal, spotlight, high-production product video, and realistic PBR reflections. **Deliverables:** index.html, styles.css, showroom.js, assets/ folder. **Stack:** Three.js, HTML5 video, PBR materials. **Description:** Showroom with a 3D pedestal and spotlight; selecting a product plays a high-production video and the object performs a slow rotation with realistic reflections. **Key interactions:** Smooth orbit controls, "View in detail" button → macro camera + video. **Accessibility & fallback:** Technical spec sheet and 2D video; prefers-reduced-motion support. **Recommended assets:** Optional 4K video, HDRI for lighting, GLB models.

Landing Pages

product

3D Product Gallery with Display Cases and Promotional Clips

Build a 3D product gallery with rotating display cases, promotional video clips, and elegant typography specs. **Deliverables:** index.html, styles.css, gallery3d.js, assets/ folder. **Stack:** Three.js, video textures, lazy-load. **Description:** Rotating 3D display cases with floating products; when approaching a case it plays a promotional clip and reveals specs in elegant typography. Smooth transitions and volumetric shadows throughout. **Key interactions:** Hover to preview, click to play video in overlay, drag to rearrange display cases. **Accessibility & fallback:** 2D gallery with thumbnails and videos; prefers-reduced-motion support. **Recommended assets:** 30–60s clips, product models, PBR textures.

Landing Pages

corporate

Elegant 3D Corporate Lobby with Welcome Video

Build an elegant minimalist 3D corporate lobby with a welcome video and smooth camera choreography. **Deliverables:** index.html, styles.css, lobby.js, assets/ folder with GLB building model and welcome video. **Stack:** Three.js, HTML5 video, GSAP. **Description:** Minimalist 3D lobby with soft lighting; upon entering, a welcome video plays on a floating screen and the camera performs an elegant dolly-in toward the logo. Hotspots display 20–30s microvideos about the company. **Key interactions:** Drag to rotate, scroll to zoom, click on hotspots → fly-to + video modal. **Accessibility & fallback:** SRT subtitles, 2D version with the same video and text. **Recommended assets:** 1080p video, optimized GLB model, voiceover.

Landing Pages

dashboard

3D Corporate Performance Dashboard with Video Insights and Comparator

Build a 3D corporate performance dashboard with floating widgets, video insights, and a split-screen period comparator. **Deliverables:** index.html, styles.css, dashboard3d.js, assets/ folder with insight videos, datasets, and widget models. **Stack:** Three.js for 3D widgets, HTML5 video for insights, D3.js for detailed charts, WebSocket for live data. **Description:** 3D dashboard composed of floating widgets (charts, maps, KPI cubes). Selecting a widget plays a video insight explaining the trend and suggesting actions; the user can compare two time periods side by side with a split camera and synchronized videos. **Key interactions:** Click to open video insight, drag to rearrange widgets, temporal comparator with synchronized scrubbing of videos and data animations. **Accessibility & fallback:** Subtitles and transcripts, 2D version with traditional dashboards and videos, prefers-reduced-motion for animations. **Recommended assets:** Explanatory videos 90–180s, CSV/JSON datasets, GLB widget models and visualization textures.

Landing Pages

corporate

3D Corporate Lobby with Welcome Video and Dynamic Agenda

Build a 3D corporate lobby that acts as an interactive portal with a welcome video and dynamic real-time agenda. **Deliverables:** index.html, styles.css, lobby.js, assets/ folder with welcome video, room models, and calendars. **Stack:** Three.js, video textures, WebRTC optional for live messages, GSAP for transitions. **Description:** 3D lobby acting as a portal: upon entering, a welcome video plays on a central screen; floating panels display the real-time daily agenda and allow playing session videos or opening virtual rooms with a fly-to transition. **Key interactions:** Select agenda items to play session videos, 3D notifications that animate the scene, free camera control or guided views. **Accessibility & fallback:** Subtitles on videos, 2D version with agenda and video links, prefers-reduced-motion support. **Recommended assets:** 60s welcome video, session clips, GLB models of rooms and signage.

Landing Pages

compliance

3D Compliance & Audit Center with Video Replays and Timeline

Build a 3D compliance and audit center featuring video replays and an animated timeline. **Deliverables:** index.html, styles.css, compliance3d.js, assets/ folder with replays, logs, and infrastructure models. **Stack:** Three.js, HTML5 video for replays, D3.js for complementary charts, GSAP Timeline. **Description:** 3D visualization of infrastructure and compliance processes; incidents appear as markers that, when activated, play a video replay of the event and display the timeline with animated audit steps. **Key interactions:** Timeline scrubbing to navigate replays, severity filters, automatic fly-to when selecting an incident, export UI for reports. **Accessibility & fallback:** Downloadable transcripts and logs, reduced-motion mode, linear version with videos and tables. **Recommended assets:** Segmented replay clips, JSON logs, GLB models of nodes and services.

Landing Pages

product

3D Product Showroom for Corporate Demos with Video Case Studies

Build a 3D product showroom for corporate demos featuring video case studies. **Deliverables:** index.html, styles.css, demoRoom.js, assets/ folder with product models, case study clips, and thumbnails. **Stack:** Three.js, video textures, Prism or similar for code overlays, GSAP for microanimations. **Description:** 3D display cases containing interactive prototypes; selecting a case plays a video case study and the case opens in 3D revealing specs, integrations, and a mini-demo video synchronized with the animation. **Key interactions:** Hover to preview, click to open 3D modal with video, video scrubbing synchronizes the prototype animation. **Accessibility & fallback:** Subtitles, textual descriptions of demos, 2D version with video gallery and technical spec sheets. **Recommended assets:** 60–90s clips per case, 3D product models, PDF files with specifications.

Landing Pages

corporate

Immersive 3D Corporate Tour for Investors

Build an immersive 3D corporate tour for investors. **Deliverables:** index.html, styles.css, app.js, assets/ folder with GLB models, institutional videos, and graphics. **Stack:** Three.js for 3D scene, GSAP for transitions, HTML5 video as textures, WebSocket optional for real-time data. **Description:** Hero section features a 3D corporate headquarters with orbit camera; hotspots on buildings play short videos (strategy, finance, R&D). When a hotspot is activated, the camera performs a smooth fly-to and a 3D panel appears with animated metrics and a narrated video with subtitles. **Key interactions:** Drag to rotate, scroll to zoom, keyboard shortcuts for predefined views, autoplay guided tour with voiceover and chapter markers. **Accessibility & fallback:** SRT subtitles, transcripts, prefers-reduced-motion support, fallback to hero video and downloadable PDF with the same narrative. **Recommended assets:** Optimized GLB models, H.264 720p videos, JSON with KPIs and voice-overs in multiple languages.

Landing Pages

coworking

3D Interactive Coworking Lobby with Welcome Videos and Guided Tour - Partner Edition

A bright professional 3D lobby as the entry portal for a coworking space. The scene includes a reception desk, info screen panels, and doors to zones (meeting rooms, private offices, open areas). Each door is a 3D hotspot with an accessible aria-label and a 20-60s video explaining the space (tour, rules, hours). On load, camera starts in a wide view; a floating 'Start Tour' button activates a guided tour with smooth GSAP fly-tos (easeOutCubic, 800-1200ms) toward each hotspot, playing video in an HTML overlay with synchronized SRT subtitles. Video also projects as a texture on a 3D plane. Navigation combines orbit controls for free exploration and numeric shortcuts (1: reception, 2: rooms, 3: open area). On mobile, hotspots activate on double-tap. Proximity detection: camera within 3.5m triggers micro-animation (scale 1.06 + glow) and muted video preview. Progressive video loading: WebP thumbnail, 480p proxy for scrubbing, 720/1080p for full playback. Performance: LOD for furniture, 512-1024px textures, pause render offscreen. Accessibility: SRT subtitles, downloadable transcripts, role=dialog, prefers-reduced-motion disables fly-to. Analytics: hotspots activated, playback time, tour starts. **Deliverables:** index.html, styles.css, lobby3d.js, assets/ (GLB lobby models, MP4 welcome videos, WebP thumbnails, voiceovers, SRT). **Stack:** Three.js, GSAP, video HTML5 textures, Draco GLB compression, IntersectionObserver. **Interactions:** Orbit controls, guided tour, numeric shortcuts (1/2/3), click hotspot opens video overlay with SRT, proximity glow animation, double-tap on mobile, download transcripts, light filter for progressive video.

Landing Pages

scientific congress

3D Scientific Congress with Interactive Posters and Presentation Videos

A virtual scientific congress with a 3D poster hall: each poster is a panel showing an abstract and a presentation video (5-15 min). On proximity, video preview activates; on click, the full presentation plays in an overlay with the paper PDF (PDF.js). Filters by topic area and a favorites system with CSV export. Guided tour mode through relevant posters. Q&A sessions where attendees leave questions anchored to video timestamps. Performance: long videos segmented by chapters, thumbnails and proxies for scrubbing. Accessibility: subtitles, transcripts, aria, prefers-reduced-motion. Metrics: papers viewed, videos played, questions sent. Recommendations for paper metadata and video formats included. **Deliverables:** index.html, styles.css, congress3d.js, assets/ (GLB poster hall models, presentation videos, PDFs). **Stack:** Three.js, video HTML5, PDF.js, GSAP. **Interactions:** Click poster opens video + abstract + PDF, filters by topic, favorites with CSV export, guided tour mode, Q&A anchored to video timestamps.

Landing Pages

tech expo

3D Tech Expo with Video Demos and Interactive Stations

A tech expo where each station shows a technical demo and an explanatory video detailing architecture, APIs and use cases. The scene is a pavilion with thematic islands (AI, security, infra) and a 3D map for navigation. Selecting a station triggers a GSAP fly-to and the demo video plays on a 3D screen; alongside the video a panel shows highlighted code snippets (Prism.js) and a Try in Sandbox button (external link). Demos include live 3D visualizations (data flows) synced with video via JSON cues. Deep dive mode pauses playback and allows inspecting logs and metrics in floating panels. Performance: heavy demos load on demand, Web Workers compatible. Accessibility: subtitles, transcripts, aria on snippets, prefers-reduced-motion. Metrics: demos started, snippets copied, time in deep dive. Sandbox integration and snippet security recommendations included. **Deliverables:** index.html, styles.css, expo3d.js, assets/ (GLB station models, demo videos, JSON snippets). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Click station opens video + code snippet + sandbox button, 3D map navigation, deep dive mode with logs/metrics, live data visualization synced with video.

Landing Pages

music festival

3D Music Festival with Main Stage, Side Screens and Replay Clips

A 3D music festival experience: main stage with giant screens, low-poly virtual audience, and side screens playing highlight clips (interviews, backstage). The live artist stream projects as a texture on the center screen; main audio routes through WebAudio for stem control (vocals, bass, percussion) in the UI. During the show, users can mark moments generating 10-30s clips stored in a local queue and shareable via UI. Camera angles: front row, side, bird's eye; changing angle applies smooth dolly and adjusts lighting. Real-time reactions (emojis) subtly affect stage lighting and particles. Director mode: replay the concert with free camera and key moment markers. Clip gallery with thumbnails and subtitles. Performance: limit animated avatars, LOD for crowd, adaptive streaming, pause offscreen. Accessibility: live subtitles, transcripts, prefers-reduced-motion. Privacy: explain camera/mic before enabling live interaction. Metrics: clips created, reactions, view time per angle. **Deliverables:** index.html, styles.css, festival3d.js, assets/ (HLS/WebRTC streams, highlight clips, GLB stage models, audio stems). **Stack:** Three.js, HLS.js/WebRTC, WebAudio API, GSAP, postprocessing (bloom). **Interactions:** 3 camera angles (front/side/bird), WebAudio stem control, emoji reactions with particle effects, mark clips with M key, director mode replay with markers, clip gallery, metrics per angle.

Landing Pages

gastronomic fair

3D Gastronomic Fair with Stands, Recipe Videos and Table Reservations

A virtual gastronomic fair with aisles and restaurant stands. Each stand includes a 3D screen playing a recipe video (60-180s) and a panel with menu and a Reserve Table button (UI simulation). On proximity, video preview activates; on click, an overlay opens with extended video, ingredients and delivery order links. Filters by cuisine type reorder stands with 3D animation and a floating map shows stand locations. Includes a guided tasting route: camera moves between selected stands with smooth transitions and voiceover introducing each proposal. Social area where visitors can leave video reviews (locally recorded via WebRTC) displayed on a 3D mural. Recipe videos include subtitles and a downloadable steps list. Performance: proxies for scrubbing, 512-1024px textures, lazy-load videos, release resources after inactivity. Accessibility: subtitles, aria on buttons, prefers-reduced-motion. Analytics: simulated reservations, video plays, filters used. Video compression and menu format recommendations included. **Deliverables:** index.html, styles.css, foodfair3d.js, assets/ (GLB stand models, recipe videos, menu PDFs). **Stack:** Three.js, video HTML5, GSAP, LazySizes. **Interactions:** Click stand opens recipe video + menu + reserve, filters by cuisine reorder stands, floating map, guided tasting route with voiceover, social video reviews, downloadable recipe steps.

Landing Pages

library

Elegant 3D Library with Educational Video Clips and Semantic Search

Build an elegant 3D library where shelves hold volumes that open to play educational video clips, combined with semantic search to find content by topic, duration, or level. **Deliverables:** index.html, styles.css, library.js, assets/ folder with clips, metadata, thumbnails. **Stack:** Three.js, HTML5 video, Algolia or local semantic search, GSAP. **Description:** 3D library where each shelf contains volumes that, when opened, play educational video clips. The experience combines elegant spatial navigation with semantic search that lets users find clips by topic, duration, or level. **Semantic search:** User types a query; the engine returns results ranked by semantic similarity (embedding) and relevant shelves illuminate in the scene. Results show thumbnails and a snippet; selecting one triggers a fly-to toward the volume and the clip plays. **Clips & metadata:** Each clip has JSON metadata: title, duration, language, transcript, tags. Side panel shows transcript with synchronized highlights (scroll-to-time). SRT subtitles and downloadable transcript option. **Spatial interactions:** Free walk through aisles with orbit/first-person toggle. Quick keyboard focus (keys 1–9) for popular sections. Favorites: drag clip to 3D "cart" to create a playlist. **Playback & quality:** Adaptive streaming when available; preload thumbnails and metadata. Pause playback when user moves away; option to play in background in HTML panel. **Accessibility & fallback:** ARIA on controls, subtitles, transcripts, and 2D version with list and player. prefers-reduced-motion reduces transitions and disables fly-to. **Performance:** Progressive shelf loading; LOD for models; 512–1024px textures. Pause render when canvas off-viewport; requestIdleCallback for non-critical tasks. **Analytics:** Search terms, clips played, average time per clip, most common navigation paths. Camera heatmaps to identify areas of interest.

Landing Pages

fashion

3D Fashion Showroom with Animated Runway and Backstage Videos

Build an elegant 3D fashion showroom with an animated virtual runway, music-reactive lighting, and backstage video clips per garment. **Deliverables:** index.html, styles.css, fashion.js, assets/ folder with GLB garment models, backstage videos, and textures. **Stack:** Three.js, video textures, PBR, GSAP, WebAudio API. **Description:** Elegant 3D showroom where a virtual runway presents collections; selecting a garment plays a backstage video showing the creative process. The runway animates with stylized models and lighting responds to the music. **Runway & video playback:** The runway is a 3D track with looping mannequin models. Clicking a garment zooms the camera in and a side panel plays a backstage clip with subtitles and credits. "Lookbook mode" displays the garment in 360° with a detail video. **Microinteractions & controls:** Hover over garment shows color swatches; click opens spec sheet with video. Backstage video playlist playable in sequence. "Editor mode" to combine garments on a mannequin and export a collage (UI). **Performance:** LOD-optimized GLB models; 1024px PBR textures. 720–1080p videos with preload="metadata"; thumbnails for preview. Pause animations when off-viewport. **Accessibility:** Subtitles and transcripts; alt descriptions for garments. prefers-reduced-motion reduces runway animations. **Metrics:** Video views, interactions per garment, user-created combinations, time in lookbook mode.

Landing Pages

corporate

Elegant 3D Corporate Campus Tour with Explanatory Videos

Build an elegant 3D corporate campus tour with semantic zones, hotspots, and multilingual explanatory videos. **Deliverables:** index.html, styles.css, app.js, assets/ folder with GLB models, HDR textures, MP4 videos, voiceovers, and SRT subtitles. **Stack:** Three.js (CDN), GSAP for transitions, HTML5 video as textures, Draco for GLB compression, IntersectionObserver for lazy-load. **Description:** Immersive 3D tour of a corporate headquarters. Visitors explore zones (reception, auditorium, R&D) and, when activating a hotspot, play a 30–90s explanatory video contextualizing the area — with voiceover and multilingual subtitles. **Scene structure:** GLB building model divided into semantic nodes (lobby, auditorium, lab). Each node has a translucent sphere hotspot with aria-label. Camera starts at a wide view with predefined keyboard-accessible views (1: Lobby, 2: Auditorium, 3: Terrace). **Hotspot activation:** (1) Smooth cinematic fly-to with GSAP easing. (2) Video loads in an HTML overlay panel or as a 3D plane texture. (3) Synchronized SRT subtitles and downloadable transcript. (4) Hotspot displays animated 3D metrics (capacity, projects, years). **Interactions:** Drag to rotate, scroll/pinch to zoom, keyboard for quick views. Touch optimized: double-tap to center, two-finger pinch to zoom. "Start tour" button for full narration with auto-guided hotspot sequence. **Video format:** H.264 MP4 720p for web, optional 1080p for desktop. Each video includes SRT and JSON metadata (duration, language, narrator). Progressive preload: thumbnails first, then adaptive streaming. **Performance:** Draco compression; 512–1024px textures; lazy-load of videos and models per section. Render loop paused when canvas is off-viewport (IntersectionObserver). LOD models, reduced draw calls, optimized requestAnimationFrame. **Accessibility & fallback:** prefers-reduced-motion disables fly-to and particles. 2D fallback: chapter-based hero video with full transcript. All hotspots have aria-label; video panel uses role="dialog" with aria-modal. **Testing & metrics:** Chrome, Safari iOS, Firefox; FPS and TTFB measurement. Track: hotspots activated, videos played, view time. A/B test autoplay tour vs. manual control.

Landing Pages

luxury

3D Luxury Product Gallery with Video Projection and Microinteractions

Build a premium 3D luxury product gallery with proximity-triggered video projection, PBR materials, and rich microinteractions. **Deliverables:** index.html, styles.css, gallery.js, assets/ folder with GLB models, promotional videos, HDRI, and sprites. **Stack:** Three.js, video textures, PBR materials, GSAP for easing, LazySizes for images. **Description:** Premium 3D showcase per product: each display case is a pedestal with soft lighting and an integrated screen that plays a promotional video when the user approaches. Minimalist aesthetic, neutral palette, and serif typography for titles. **Proximity detection:** Distance between camera and showcase center is calculated; crossing a threshold (e.g. 3.5m) triggers a transition — the case illuminates, material gains subtle bloom, and video fades in. **Video integration:** MP4 videos used as textures on a 3D plane inside the showcase. Alternative: HTML overlay panel synchronized with the showcase for accessibility. SRT subtitles rendered in HTML for legibility and searchability. **Microinteractions:** Hover/Focus — pedestal rises 6–10px with soft box-shadow. Click — showcase opens (3D animation) revealing spec sheet with details and extended clip. Drag — product rotation with inertia; double-tap for macro view. **Performance:** LOD-optimized GLB models; 1024px PBR textures. 720p videos with preload="metadata" and adaptive streaming. Pause videos off-viewport; release textures when unused. **Accessibility:** HTML panel with native video controls and aria-describedby. Subtitles and transcripts; alt descriptions for images. prefers-reduced-motion reduces animations and disables auto-rotation. **Navigation & search:** Sidebar with filters (collection, material, year). Filter triggers smooth 3D reorder animation. Breadcrumbs and deep links to share a specific showcase. **Analytics:** Video plays, average view time, rotation interactions, "View spec" clicks. Camera heatmaps to identify most-explored showcases.

Landing Pages

personal brand

3D Personal Brand Experience with Showreel and Microvideos

Build a 3D personal brand experience using a rotating cube portfolio where each face plays a microvideo, with a monochromatic palette and metallic accents. **Deliverables:** index.html, styles.css, personal3d.js, assets/ folder. **Stack:** Three.js, video textures, GSAP. **Description:** Rotating 3D cube acting as a portfolio: each face plays a microvideo (showreel, bio, projects). Smooth rotation with a monochromatic palette and metallic accents. **Key interactions:** Swipe/drag to rotate, click to expand face to fullscreen with subtitles. **Accessibility & fallback:** Linear version with videos and accessible text. **Recommended assets:** 15–45s microvideos, low-poly models, voiceovers.

Landing Pages

typography

3D Cinematic Typography Show with Background Video

Build a cinematic 3D typography show with metallic floating letters reacting to an atmospheric background video. **Deliverables:** index.html, styles.css, type3d.js, assets/ folder. **Stack:** Three.js, HTML5 video, postprocessing. **Description:** Floating 3D letters with metallic finishes; an atmospheric background video modulates the lighting and the letters react to audio with micro-movements. Ideal for elegant brands. **Key interactions:** Video scrubbing to change mood, hover to reveal subtitles or descriptions. **Accessibility & fallback:** Static version with video and alternative text. **Recommended assets:** Atmospheric video, variable fonts, letter models.

Landing Pages

luxury

3D Luxury Product Scene with Video Storytelling

Build a refined 3D luxury product scene with synchronized video storytelling, camera choreography, and particle effects. **Deliverables:** index.html, styles.css, luxury.js, assets/ folder. **Stack:** Three.js, video textures, PBR materials. **Description:** Luxury product on a 3D pedestal; activating "Story" plays a storytelling video that synchronizes camera and particles to create a refined visual narrative. Slow and elegant transitions. **Key interactions:** Play story, switch chapters, subtitles and technical notes. **Accessibility & fallback:** Video with transcript and technical spec sheet. **Recommended assets:** Optional 4K video, high-quality GLB models, HDRI.

Landing Pages

portfolio

3D Portfolio for Creative Studio with Video Reels

Build a 3D portfolio for a creative studio featuring spinning cubes with video reels on their faces and cinematic scroll-triggered transitions. **Deliverables:** index.html, styles.css, portfolio.js, assets/ folder with reels and models. **Stack:** Three.js, video textures, ScrollTrigger. **Description:** 3D cubes that spin and display reels on their faces; as the user scrolls each reel activates and the camera approaches with a cinematic transition. Monochromatic aesthetic with gold accents. **Key interactions:** Scroll-triggered play, click for fullscreen, reel scrubbing. **Accessibility & fallback:** Reel list with subtitles; accessible playback controls. **Recommended assets:** 720–1080p reels, low-poly models.

Landing Pages

interview

3D Interview Room with Video Replays and Synchronized Annotations

Build an elegant 3D interview review room where each recorded interview appears as a card on a table; opening a card plays the video replay with synchronized 3D annotations. **Deliverables:** index.html, styles.css, interviewRoom.js, assets/ folder with recordings, transcripts, and models. **Stack:** Three.js, WebRTC for recording, video playback, GSAP. **Description:** An elegant 3D environment for reviewing recorded interviews. Each interview is represented as a floating card on a table; opening it plays the video replay and the interviewer's annotations appear synchronized in 3D as floating notes. **Annotation sync:** Annotations have timestamps; as the video plays, notes appear and position themselves in 3D space with animation. The user can add new annotations that save with timestamp and relative position. **Controls & exports:** Play/pause, jump to annotation, export PDF summary with timestamps and highlighted clips. Side-by-side comparator for viewing two interviews simultaneously with synchronized videos. **Privacy & permissions:** Request recording permission; encrypt recordings at rest; option to anonymize audio/video for sharing. **Accessibility:** Auto-captions and editable transcripts; ARIA on controls.

Landing Pages

wellness

3D Interactive Wellness Garden with Meditation Videos and Ambient Sound

Build a serene 3D interactive garden where the user explores paths and, at rest points, plays wellness videos (guided breathing, micro-meditations). The scene reacts to audio with light changes and soft particles. **Deliverables:** index.html, styles.css, garden.js, assets/ folder with meditation videos, ambient audio tracks, and models. **Stack:** Three.js, video textures, Howler.js for audio, GSAP. **Description:** A serene 3D garden environment where users explore winding paths and discover rest spots (bench, fountain, stone circle). Each spot plays a 3-5 minute wellness video. When a session starts, the camera centers on the spot and the rest of the scene dims for focus. **Session activation:** Approaching a rest spot shows a panel with the video clip; starting it centers the camera and dims the surrounding scene. Duration controls, subtitles, and volume included. **Audio reaction:** The scene lighting and particles gently pulse in response to the ambient audio track, creating a calm, immersive atmosphere. **Accessibility & privacy:** Transcripts and subtitles included; audio-only mode (no voice, just music). No user audio recording or transmission. No special permissions needed. **Performance:** 720p videos, streaming audio, LOD for vegetation, culling for particles.

Landing Pages

recording studio

3D Recording Studio with Session Videos and Interactive Mixing

Build a 3D recording studio where each track is an interactive object; dragging a track to the central console plays its session video and the user can adjust mix (3D faders) with real-time visual response. **Deliverables:** index.html, styles.css, studio3d.js, assets/ folder with recorded sessions, equipment models, and stems. **Stack:** Three.js, WebRTC for recording, WebAudio API, Howler.js. **Description:** A 3D recording studio where each track is an interactive 3D object. Dragging a track to the central console plays its session recording video. The user adjusts mix levels with real-time visual feedback via 3D faders. **Recording & replays:** WebRTC recordings stored as MP4; replays synchronized with current mix. Timestamp annotations and stem export. **Collaborative controls:** Real-time multiuser (WebRTC + signaling) with permissions; chat and shared notes. Version review with timeline and markers. **Privacy & performance:** Encrypted recordings; compressed stems; LOD for equipment models.

Landing Pages

innovation

3D Innovation Garden — Guided route showcase

A route-led innovation garden focused on curated pathways, thematic wayfinding, and project discovery. A route-first innovation garden experience with guided paths and thematic storytelling. Build a 3D innovation garden where each "plot" represents a project; walking themed routes (sustainability, AI, health) plays project videos and the camera guides the user with smooth transitions. **Deliverables:** index.html, styles.css, innovationGarden.js, assets/ folder with project videos, models, and maps. **Stack:** Three.js, HTML5 video, GSAP, search index. **Description:** An elegant 3D environment where each plot represents an innovation project. Themed routes guide the user through related projects with smooth camera transitions and video playback. **Routes & projects:** Predefined routes with waypoints; each waypoint has a video, technical sheet, and links. "Curator" mode selects featured projects and plays a sequence with voiceover. **Interactions:** Walk, fly, or auto tour; interest markers; create a playlist of favorite videos. Shareable links with timestamp and waypoint. **Accessibility & performance:** Subtitles, transcripts, prefers-reduced-motion, LOD and lazy-load of videos.

Landing Pages

tech product

3D Tech Product Scene with Video Demo and Technical Hotspots

Build a 3D tech product scene on a pedestal with technical hotspots; each hotspot opens a video demo showing integration, API calls, and use cases. The camera moves smoothly to focus on the active hotspot. **Deliverables:** index.html, styles.css, tech3d.js, assets/ folder with demo videos, models, and documentation. **Stack:** Three.js, HTML5 video, Prism for snippets, GSAP. **Description:** A tech product on a 3D pedestal with interactive hotspots. Each hotspot opens a video demo with synchronized code snippets. Camera smoothly focuses on the active hotspot. **Snippets & video integration:** Video in overlay with subtitles; highlighted code snippets alongside the video. "Copy snippet" button and sandbox link. **Accessibility & fallback:** Transcripts, ARIA on hotspots, 2D version with videos and documentation.

Landing Pages

product gallery

3D Light Mode Product Gallery with Video Projection and Filters

Build a light mode 3D product gallery with editorial aesthetic: off-white background, soft shadows, and sans-serif typography with light tracking. Rows of minimal white matte pedestal showcases with light marble base. Each showcase holds a 3D product and an integrated screen that plays a promo video. Proximity detection triggers lighting animation and video fade-in. Filters reorder showcases with GSAP easing and stagger. **Deliverables:** index.html, styles.css, gallery3d.js, assets/ folder with GLB models, promos, HDRI, WebP thumbnails. **Stack:** Three.js, video textures, PBR materials, GSAP, LazySizes for images. **Description:** A light mode editorial 3D gallery. Proximity (Euclidean distance) activates video playback with lighting response. Videos as 3D textures + HTML overlay. Filters reorder showcases with GSAP stagger. Product rotation with inertia. Double-tap for macro view with simulated DOF. Technical sheet modal with extended video, specs, color variants, "Request sample" button. **Performance:** PBR textures 512-1024px, WebP thumbnails, on-demand video loading, video cache with 30s inactivity release. **Accessibility & fallback:** HTML panel with native video controls, SRT subtitles, aria-describedby on cards, prefers-reduced-motion. 2D fallback thumbnail gallery with player.

Landing Pages

corporate

3D Light Mode Corporate Campus Tour with Explanatory Videos

Build a light mode 3D corporate campus tour with a luminous minimal palette, pale gold and sky blue accents, and soft global HDRI daylight illumination. The GLB campus model is segmented by semantic zones: lobby, auditorium, lab, terrace, cafeteria. Each zone has a translucent spherical 3D hotspot with subtle border and projected shadow. Camera starts in a wide aerial view with a floating "Start tour" button. **Deliverables:** index.html, styles.css, app.js, assets/ folder with GLB models, HDR textures, MP4 videos, SRT subtitles. **Stack:** Three.js (CDN), GSAP for transitions, HTML5 video as textures, Draco for GLB compression, IntersectionObserver for lazy-load. **Description:** A bright, minimal 3D tour of a corporate headquarters with 5 semantic zones. Clicking a hotspot triggers a cinematic fly-to (GSAP, 800-1200ms) and loads an explanatory video in a semi-transparent white overlay panel with rounded corners. Video includes synchronized SRT subtitles and a toggle between 3D texture projection and HTML overlay. Animated metrics appear on the hotspot during playback. **Interactions:** Drag to rotate, scroll/pinch to zoom, number keys 1-5 for predefined views. Auto-tour mode with voiceover and chapter markers. Progressive video loading (WebP thumbnails, 720p H.264, 480p fallback). LOD for buildings, culling for vegetation. **Accessibility & fallback:** SRT subtitles, downloadable transcript, role="dialog" on video panel, prefers-reduced-motion reduces fly-to. 2D fallback with hero video and chapters.

Landing Pages

fashion

3D Light Mode Fashion Showroom with Runway and Backstage Videos

A light mode fashion showroom with a marble runway and cream walls. The runway is a 3D track where stylized mannequins walk in loop; each mannequin is linked to a garment with metadata. Selecting a garment triggers a camera dolly and a side panel plays a backstage video showing the creative process, interviews, and garment details. Video includes subtitles and credits. Runway has dynamic lighting synced to the audio track: BPM analysis adjusts key light intensity and color smoothly. Lookbook mode lets the user stop the runway and spin the garment 360° with macro zoom control. A 'Mix' button opens a 3D editor where the user drags garments onto a mannequin and exports a collage as an image. Mannequin animations use simple skeletons and optimized morph targets. Backstage videos load on demand and play in an HTML overlay with optional 3D screen texture projection. **Deliverables:** index.html, styles.css, fashion3d.js, assets/ (GLB models, backstage videos, PBR textures, SRT subtitles, transcripts). **Stack:** Three.js, video textures, PBR materials, GSAP, WebAudio API. **Interactions:** Garment selection triggers backstage video, lookbook 360°, mixer editor with collage export, lighting synced to audio.

Landing Pages

timeline

3D Light Mode Timeline with Animated Dioramas and Video Narration

A 3D timeline in light mode with a floating horizontal line and minimalist dioramas on light pedestals. Each milestone has a GLB diorama representing an event and a 60-120s narrated video. Scrolling moves the camera between milestones with cinematic easing; arriving at a milestone auto-plays the video on a 3D panel or HTML overlay and local lighting changes to emphasize the scene. Videos include JSON metadata with start, end, chapterTitle, cameraCue and lightingCue. The timeline allows scrubbing and chapter skipping; scrubbing uses low-res proxies for fluidity and loads high quality on stop. Each diorama has hotspots for micro-videos and downloadable PDFs. Curator mode plays a predefined sequence with voiceover and visual markers. Performance: LOD for dioramas, 512px textures, on-demand video loading. **Deliverables:** index.html, styles.css, timeline3d.js, assets/ (diorama GLBs, narrated videos, SRT subtitles, transcripts, JSON metadata). **Stack:** Three.js, video HTML5, GSAP Timeline, ScrollTrigger. **Interactions:** Scroll-triggered camera, auto-play video per milestone, hotspots with micro-videos, curator mode.

Landing Pages

photography

3D Light Mode Photography Portfolio with Video Projections

A light mode photography portfolio where floating panels act as canvasses projecting short video clips. Editorial aesthetic: white background, thin warm-gray frames, serif typography for titles. On entry, the camera does a gentle pan across the gallery; approaching a panel plays the clip with fade-in and shows a metadata card with title, year, gear, and author notes. Clips are short 4–12s loops optimized for web. Horizontal scrubbing on a panel advances the clip frame-by-frame. A 'Behind the Scenes' button opens an extended video in overlay. Panels can be grouped by series; selecting a series reorders the camera with animation and a subtle parallax between layers. Accessibility: clips include captions when voice is present, plus a transcript and text descriptions. The system pauses out-of-viewport clips and releases textures after 60s of inactivity. **Deliverables:** index.html, styles.css, photo3d.js, assets/ (clips, textures, panel models, SRT subtitles, transcripts). **Stack:** Three.js, video textures, GSAP, LazySizes. **Interactions:** Hover/approach plays clip, frame-by-frame scrubbing, series grouping, extended video overlay.

Landing Pages

data

3D Light Mode Data Visualizer with Video Insights and Comparator

A 3D dashboard in light mode with floating widgets on a light plane. Each widget is a 3D object showing a visualization; selecting it plays a video insight that explains the trend. Two periods can be compared by activating comparator mode: the camera visually splits and plays two synced videos side by side while visualizations animate differences with particles and interpolated lines. Insight videos are 60-180s narrations with subtitles and embedded graphics; playing them expands the widget and shows 3D details. Synchronized scrubbing between video and data visualization; scrubbing interpolates data and updates 3D animations in real time. Live data via WebSocket with smoothing to prevent jumps. Controls for exporting snapshots and generating short insight clips with timestamps. Performance: widget instancing, 512px textures, on-demand video loading. **Deliverables:** index.html, styles.css, data3d.js, assets/ (insight videos, JSON datasets, widget models, SRT, transcripts). **Stack:** Three.js, D3.js, video HTML5, WebSocket. **Interactions:** Widget selection plays insight, synchronized comparator, scrubbing updates visualization.

Landing Pages

conference

3D Light Mode Conference Room with Streaming and Highlight Clips

A light mode conference room with cream seats, a large central screen, and side panels for highlight clips. The main stream plays on the central screen via HLS; highlight clips play on side panels as 3D textures or HTML overlays. The camera offers predefined angles: stage, audience, and side view; the user can switch with smooth transitions. During the event, moderators can mark key moments that generate highlight clips; these appear in a side list and can be replayed with one click. Live captions when supported. A 'replay' function plays the selected segment with free camera and markers. Social reactions subtly affect lighting and particles. Performance: adaptive buffering, low resolution on mobile, pauses 3D render when tab is hidden. 2D-only stream option for slow connections. **Deliverables:** index.html, styles.css, conference3d.js, assets/ (HLS streams, highlight clips, room models, SRT, transcripts). **Stack:** Three.js, HLS.js, video textures, postprocessing. **Interactions:** Camera angle switching, clip replay, real-time reactions, 2D stream fallback.

Landing Pages

library

3D Light Mode Educational Library with Clips and Semantic Search

A 3D library in light mode with light-wood shelves containing educational clip volumes. Semantic search allows natural language queries; results illuminate relevant shelves and the camera flies to the clip. Each clip has rich metadata: title, duration, language, transcript, tags, difficulty. Selecting a clip plays it on a 3D panel and the transcript syncs with highlights that jump to timestamps. Playlists by dragging clips to a 3D cart. 'Mark for review' adds personal notes with timestamps. Adaptive streaming, thumbnails and proxies for fast scrubbing. High-contrast mode and adjustable text size. Scene optimized with LOD for shelves and lazy-load by section. Analytics tracks frequent searches, top clips, and navigation paths. **Deliverables:** index.html, styles.css, library3d.js, assets/ (clips, metadata JSON, thumbnails, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP, local embedding search. **Interactions:** Semantic search illuminates shelves, fly-to clip, 3D playlists, scrubbing with proxies.

Landing Pages

tech showroom

3D Tech Showroom — Product proof lab

A product-proof showroom focused on demos, technical validation, and conversion-oriented storytelling. A lab-style showroom focused on product proof, technical storytelling, and interactive code snippets. A deep-dive showroom for product demos, technical proof, and interactive code snippets. A tech showroom in light mode with a product on a pedestal. Technical hotspots surround the product; activating one plays a video demo showing integration, API calls, and use cases. The video syncs with product animation — e.g., an auth API demo triggers an animated login flow on the 3D product interface. A code snippet panel with Prism.js syntax highlighting, copy button, and sandbox link. Deep Dive mode pauses global animation and lets users inspect product internals with explanatory overlays and microvideos. Shareable links include timestamp and active hotspot. Assets: 720p videos, GLB models with LOD, preloaded snippets. Accessibility: transcripts, aria on hotspots, prefers-reduced-motion, 2D version. **Deliverables:** index.html, styles.css, techshowPro.js, assets/ (GLB models, demo videos, snippets JSON). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Hotspot activates video demo and synced animation, interactive snippets, Deep Dive mode, shareable links.

Landing Pages

corporate library

3D Corporate Library — Training and onboarding pro

A training and onboarding library with structured playlists, clips, and internal search. A training-focused corporate library with playlists, onboarding clips, and search. Enhanced corporate library in light mode with shelves organized by department (IT, RH, Finances, Marketing). Each training clip has metadata and a panel with video, subtitles, timestamped notes, and completion tracking. Algolia-like full-text search with relevance ranking. Filters by duration, department, and level. Fly-to camera on clip selection. Timestamped notes saved in IndexedDB, exportable to TXT. Playlist system for curating training sequences. Scrubbing with proxy thumbnail previews. Adaptive streaming. Accessibility: subtitles, transcripts, prefers-reduced-motion support, 2D fallback view. Metrics: completion rate, average time per clip, most frequent notes. LOD and lazy-load per shelf. **Deliverables:** index.html, styles.css, corpLibraryPro.js, assets/ (metadata JSON, WebP thumbnails). **Stack:** Three.js, video HTML5, Algolia-like local search engine, GSAP, IndexedDB. **Interactions:** Semantic search and fly-to, timestamped notes, training playlists, scrubbing with proxy previews, completion tracking.

Landing Pages

corporate library

3D Corporate Library — Docs and learning hub

A docs-first learning hub optimized for references, clips, and discovery. A learning hub version of the corporate library optimized for docs, references, and discovery. A learning hub version of the corporate library focused on docs, clips, and discovery. A corporate library in light mode with shelves organized by department (IT, RH, Finances, Marketing). Each training clip has metadata and a panel that plays the video with subtitles and synchronized notes. Keyword search and filters by duration, department, and level. Selecting a result flies the camera to the shelf and plays the clip. Personal note system linked to timestamps, saved in IndexedDB and exportable. Adaptive streaming, thumbnails and proxies for scrubbing. Accessibility: subtitles and full transcript per clip. Performance: LOD and lazy-load per shelf. Metrics: completion rate, average time per clip, most frequent notes. **Deliverables:** index.html, styles.css, corpLibrary3d.js, assets/ (training clips, metadata JSON, thumbnails, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP, local search engine. **Interactions:** Search and fly-to, timestamped notes, training playlists, scrubbing with proxies.

Landing Pages

innovation garden

3D Innovation Garden — Project tour trails

A tour-led innovation garden designed around project videos, plot-by-plot storytelling, and zone transitions. A tour-led innovation garden experience highlighting project videos and movement through zones. An innovation garden in light mode with gravel paths, stylized vegetation, and themed plots by route (AI, Sustainability, Health). Each plot has a pedestal with a 3D video screen that plays project videos as textures. Routes can be followed with an auto tour that moves the camera and plays voiceover narration. Each project includes video, technical sheet, and resource links. A curator system creates playlists of favorite projects and exports as PDF. Videos load on demand and play in HTML overlay with subtitles. Waypoint sharing via URL with camera fly-to. Analytics track route starts and project views. LOD for vegetation, prefers-reduced-motion, 2D fallback view. **Deliverables:** index.html, styles.css, innovationGardenTours.js, assets/ (project videos, GLB models, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP, IndexedDB, SpeechSynthesis. **Interactions:** Auto tour by route with voiceover, video playback with 3D texture projection, project playlists, PDF export, shareable waypoints.

Landing Pages

personal brand

3D Light Mode Personal Brand Experience with Showreel and Microvideos

A personal brand portfolio in light mode with a rotating cube where each face plays a microvideo: bio, projects, testimonials, contact. Smooth rotation responds to swipe/drag; clicking a face expands the cube and plays the microvideo fullscreen with subtitles. A project timeline displays case study videos with scrubbing. Pitch mode plays a sequence of microvideos with voiceover and typographic animations. Shareable links with timestamp and active face. Mobile optimized with 720p videos and scrubbing proxies. Accessibility: subtitles, transcripts, prefers-reduced-motion, 2D fallback. **Deliverables:** index.html, styles.css, personalShow3d.js, assets/ (microvideos, low‑poly models, voiceovers). **Stack:** Three.js, video textures, GSAP. **Interactions:** Rotating cube with microvideos, expand to fullscreen, project timeline, Pitch mode.

Landing Pages

tech

3D Tech Showroom — SDK integration guide

A developer-facing showroom centered on SDK implementation, APIs, and integration guidance. A developer-first showroom focused on SDK integrations, API flows, and implementation guidance. A developer-focused showroom landing centered on SDK flows, hotspots, and integrations. A light mode tech showroom where a product sits on a light pedestal. Technical hotspots surround the product; activating one plays a demo video showing integration, API calls and use cases. The video syncs with product animation: for example, showing an auth API makes the product's 3D interface display an animated login flow. Includes a code snippet panel with syntax highlighting and 'Copy'/'Sandbox' buttons. A 'Deep Dive' mode pauses global animation and lets users inspect product internals with explanatory overlays and micro-videos. Shareable links with timestamp and active hotspot. **Deliverables:** index.html, styles.css, techshow3d.js, assets/ (GLB models, demo videos, JSON snippets, SRT). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Hotspot activates video demo and synced animation, interactive snippets, Deep Dive mode.

Landing Pages

freelance

3D Interactive Freelance Portfolio with Showreel and Microvideos

A freelance portfolio in light mode with a central 3D cube that acts as a content container: each face plays a microvideo (bio, projects, testimonials, contact). On load, the camera does a smooth dolly‑in (1.2s easeOutCubic). The cube rotates slowly idle; the user can drag it with inertia and rotation limits. Clicking a face expands it into a 3D panel that separates from the cube and plays the microvideo in high resolution with SRT subtitles. The panel shows metadata (date, role, tools) and a "View full case" button that opens a modal with an extended video and image gallery. Frame‑by‑frame scrubbing on microvideo via horizontal gesture; uses a low‑res proxy during scrub. A project timeline lets users select a project and fly‑to (900ms) a 3D showcase vitrine with project assets (mockups, screenshots) and a synchronized case study video with 3D animations (halos, guide lines). Videos include SRT and downloadable transcripts. Performance: low‑poly models, Draco compression, 512–1024px textures, lazy‑load, texture release after 30s inactivity. IntersectionObserver pauses render. Accessibility: native video controls, aria‑label, prefers‑reduced‑motion stops auto‑rotation. Analytics: plays, avg time, rotation interactions, case clicks. **Deliverables:** index.html, styles.css, app.js, assets/ (GLB models, MP4s, WebP thumbnails, audio stems). **Stack:** Three.js, GSAP, WebAudio API, video HTML5. **Interactions:** Cube with microvideos, expand panel with SRT, frame‑by‑frame scrub, timeline fly‑to, 3D vitrine with animated halos.

Landing Pages

videographer

3D Freelance Studio for Videographer with Reels and Interactive Timeline

A 3D studio for a freelance videographer. The scene simulates a studio with floating monitors on a curved wall; each monitor is a 3D plane playing a reel in loop (10–30s). On hover or approach, the reel expands with playback controls and subtitles. A global timeline at the bottom allows scrubbing between reels — moving the scrubber slides the camera laterally along the wall and plays the active reel in high resolution. "Session replay": users select multiple clips and generate a compiled video UI with preview and JSON download (order and timestamps). "Director mode": overlays with metadata (camera, lens, settings) and BTS microvideos in a side panel. Performance: proxies for scrubbing, preload thumbnails, release textures after 60s inactivity. Accessibility: subtitles, transcripts, aria on controls. Analytics: most viewed reels, average view time, compilations created. **Deliverables:** index.html, styles.css, studio.js, assets/ (reels MP4, thumbnails, models). **Stack:** Three.js, video textures, GSAP. **Interactions:** Timeline scrub slides camera along curved monitor wall, session replay JSON export, director mode with BTS microvideos.

Landing Pages

showroom

3D Freelance Showroom for Product Designer with Promotional Videos

An elegant 3D showroom for a freelance product designer. Minimalist scene with marble floor and neutral walls; a rotating pedestal holds the product (GLB model). Approaching via drag or "View detail" button triggers a camera animation (800–1000ms) with simulated DOF and higher model resolution. Each product has an integrated screen in its base playing a promotional video as a 3D texture and HTML overlay for accessibility. Video starts on approach or play button click. Technical hotspots around the product (materials, dimensions, process) deploy microvideos (10–30s) and 3D animations showing section cuts or morphs. A variant selector changes PBR textures in real time with 300ms crossfade. On mobile, macro view activates with double-tap, rotation limited to 180° to prevent context loss. Performance: LOD models, 512–2048px textures by device, adaptive video streaming, release textures/stop video when out of viewport. Accessibility: SRT subtitles, aria‑describedby on hotspots, native video controls. Analytics: plays per variant, macro view time, hotspot clicks. **Deliverables:** index.html, styles.css, showroom.js, assets/ (GLB models, promo videos, HDRI, PBR textures). **Stack:** Three.js, PBR materials, GSAP, video HTML5. **Interactions:** Camera approach with DOF, variant crossfade, hotspot microvideos with section cut animation, double-tap macro on mobile.

Landing Pages

freelance

3D Freelance Landing Page for Web Developer with Interactive Demo and Video Tutorial

A 3D landing page for a freelance web developer featuring an interactive product mockup in a 3D panel. Pressing 'Play demo' plays a tutorial video synchronized with the mockup: the video explains steps and the mockup executes animations (opening menus, simulating API calls) in real time. The video acts as a master clock sending JSON cues that GSAP interprets to animate the mockup. An 'Explore' mode lets users manipulate the mockup manually; the video pauses and an overlay shows textual explanations. Code snippets highlighted with Prism.js appear alongside the video; a 'Copy' button copies the snippet to clipboard. On mobile, the mockup simplifies and the video plays in overlay. Proxy versions for scrubbing, LOD for the mockup, texture release on inactivity. Accessibility: subtitles, aria on buttons, prefers-reduced-motion. Analytics: demo plays, snippets copied, mockup interactions. **Deliverables:** index.html, styles.css, dev3d.js, assets/ (demo videos, models, code snippets). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Play demo with video-mockup sync, explore mode with manual mockup manipulation, copy code snippets.

Landing Pages

illustrator

3D Portfolio for Freelance Illustrator with Video Projections and Macro Zoom

A 3D gallery for a freelance illustrator. Floating panels in a 3D grid project short video clips showing timelapse process or subtle animations. On approach, the panel elevates 8–12px and the clip plays with fade‑in. Macro zoom: double‑click on a panel activates a macro camera allowing frame‑by‑frame scrubbing of the timelapse and shows layers (sketch, lineart, color) as toggles that overlay with blending. The user can export a frame as PNG (downloads generated canvas image). Filters by technique and project; applying a filter reorders panels with 3D animation and stagger. Proxy video versions used for scrubbing, high quality for full playback. Accessibility: captions for voice clips, transcripts, prefers‑reduced‑motion. Analytics: most played clips, frames exported. **Deliverables:** index.html, styles.css, gallery.js, assets/ (clips, images, panel models). **Stack:** Three.js, video textures, GSAP, LazySizes. **Interactions:** Hover/approach plays clip, macro zoom with frame scrubbing, layer toggles, export PNG, filters with 3D stagger animation.

Landing Pages

portfolio

3D Freelance Portfolio for Motion Designer with Showreel Projections and Stem Control

A 3D space where panels project showreels and the user controls audio stems (music, sfx, voice). Selecting a reel opens a panel with sliders for stem volume and effect parameters (reverb, delay) that affect playback in real time. The scene reacts to audio with 3D visualizers (particles, bars) synchronized by FFT. Scrubbing and chapter markers for each reel. A 'Deconstruct' mode shows project layers (assets, timeline) with microvideos explaining the process. Audio buffers and resource release on inactivity. Accessibility: subtitles, transcripts, prefers-reduced-motion. Analytics: most adjusted stems, reels played. **Deliverables:** index.html, styles.css, motion3d.js, assets/ (showreels, stems, models). **Stack:** Three.js, WebAudio API, video HTML5, GSAP. **Interactions:** Click reel opens stem mixer, FFT-reactive particles and bars, deconstruct mode with project layers and microvideos.

Landing Pages

wedding

3D Freelance Wedding Photography Experience with Reels and Event Timeline

A 3D immersive wedding timeline. The scene is a hallway with pedestals representing key moments (ceremony, vows, first dance). Each pedestal plays a reel or slideshow; clicking a pedestal triggers a camera fly‑to and plays an extended video with subtitles and credits. A bottom timeline allows scrubbing by event hour; moving the scrubber slides the camera laterally and activates pedestals in sequence. A 'Highlight Reel' function lets clients mark timestamps and generate a JSON playlist. Proxy videos for scrubbing, high quality for full playback. Accessibility: subtitles, transcript of vows, prefers-reduced-motion. Analytics: most viewed clips, time spent at each pedestal. **Deliverables:** index.html, styles.css, wedding3d.js, assets/ (reels, photos, audio). **Stack:** Three.js, video textures, WebAudio API, GSAP. **Interactions:** Timeline scrub moves camera along pedestal hallway, click pedestal opens extended video, highlight reel playlist export.

Landing Pages

3D Freelance Portfolio for UX/UI Designer with Interactive Mockup and Video Walkthrough

A 3D landing showing 3D interface mockups. Pressing 'Play walkthrough' plays a synchronized video that guides the camera through the mockup and highlights interactions (hover, click, transitions). The video sends cues to animate overlays and tooltips on the mockup. An 'Inspect' mode pauses the walkthrough and lets users interact with components; resuming continues from the current timestamp. Code snippets and links to interactive prototypes are included. Proxy videos for scrubbing, LOD for mockup. Accessibility: subtitles, aria on controls. Analytics: walkthroughs completed, mockup interactions. **Deliverables:** index.html, styles.css, ux3d.js, assets/ (mockup GLB, walkthrough videos, screenshots). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Play walkthrough with tooltip cues and element highlights, inspect mode with component hover and code snippets, click to cycle projects.

Landing Pages

consultant

3D Freelance Landing for Consultant with Case Room and Testimonial Videos

A 3D boardroom where each table contains a case study represented by a 3D card. Opening a card plays a client testimonial video and shows animated metrics (ROI, implementation time). A 'Compare' mode places two cases side by side with synced videos to show differences. A resource panel offers downloadable PDFs and an accessible contact form. Proxy videos for scrubbing, LOD for furniture, texture release on inactivity. Accessibility: subtitles, transcripts, aria on cards. Analytics: testimonials viewed, comparisons made. **Deliverables:** index.html, styles.css, consult3d.js, assets/ (testimonials, models, PDFs). **Stack:** Three.js, video HTML5, GSAP, LazySizes. **Interactions:** Click card opens testimonial with metrics, compare two cases side by side, contact form, PDF download.

Landing Pages

coach

3D Freelance Landing for Coach with Session Room and Guided Videos

A calm 3D room where each station offers a guided session (mindfulness, productivity). Starting a session centers the camera and dims the rest of the scene; the video plays with subtitles and a 3D countdown showing remaining time. Duration controls and option to download transcript. For privacy, no user recording; live coaching explains permissions before activating camera/mic. 720p videos, LOD for vegetation, release textures. Accessibility: subtitles, transcripts, prefers-reduced-motion. Analytics: sessions started, average time. **Deliverables:** index.html, styles.css, coach3d.js, assets/ (guided videos, audio, models). **Stack:** Three.js, video HTML5, Howler.js, GSAP. **Interactions:** Click station starts guided session with timer and transcript download, live coaching with camera permission dialog.

Landing Pages

writer

3D Writer Library — Readings and references

A writer-centric library for references, readings, and structured reading paths. A 3D library where each book projects a reading clip (video or audio). Selecting a book zooms the camera in and plays the reading with subtitles and synchronized highlighted text. A 'Live Reading' mode connects to a WebRTC stream (optional) or plays a recording. A panel shows excerpts and buy/download links. Proxy videos for scrubbing, LOD for shelves. Accessibility: subtitles, transcripts, descriptions. Analytics: readings played, excerpts downloaded. **Deliverables:** index.html, styles.css, writer3d.js, assets/ (reading clips, text snippets, models). **Stack:** Three.js, video HTML5, Howler.js, GSAP. **Interactions:** Click book opens reading with synced text highlight, live reading mode, download excerpts.

Landing Pages

translator

3D Translator Library — Voice and language

A language-first library for voice notes, translations, and multilingual content. A 3D library where each shelf contains translation examples and voice clips in different languages. Selecting an example plays the original clip and translation in audio, with synchronized subtitles and parallel text. A side-by-side comparator shows original and translation with synced scrubbing. A form allows requesting custom samples. Proxy videos for scrubbing, LOD for shelves. Accessibility: subtitles, transcripts, aria. Analytics: most requested languages, clips played. **Deliverables:** index.html, styles.css, translator3d.js, assets/ (voice clips, transcripts, models). **Stack:** Three.js, Howler.js, video HTML5, GSAP. **Interactions:** Click shelf opens original + translated audio with parallel text, compare mode with synced audio players, request custom sample form.

Landing Pages

trade fair

3D Immersive Trade Fair with Pavilions and Product Videos

A virtual trade fair in light professional mode: a 3D venue with aisles, stands and a central atrium. Each stand is a GLB module with exhibitor branding and an integrated screen playing a promo video (30-90s). Camera starts in the atrium with a floating 3D map with hotspots to jump to pavilions by category. Navigation combines orbit controls for free exploration and a guided tour mode with cinematic fly-to (GSAP easeOutCubic, 900ms). Three interaction levels per stand: preview (thumbnail + muted audio loop), panel (HTML overlay with video, spec sheet and CTA), and demo (extended video projected as texture on a 3D plane inside the stand). Proximity activates preview: when camera is within 3.5m, thumbnail expands and video fades in. Videos include SRT and JSON metadata (title, duration, language, contact). Meeting system: visitor can request a live demo; UI generates a request (no backend) and marks the stand with an icon. Performance: LOD for stands, 512-1024px textures, lazy-load videos, pause render when canvas offscreen. Accessibility: SRT subtitles, role=dialog on overlays, prefers-reduced-motion reduces fly-to and particles. Analytics: play events, time in stand, demo requests. **Deliverables:** index.html, styles.css, fair3d.js, assets/ (GLB pavilion models, MP4 videos, WebP thumbnails, JSON metadata). **Stack:** Three.js, GSAP, HLS.js, video HTML5 textures, Draco GLB compression, IntersectionObserver. **Interactions:** Click stand opens panel with video + spec sheet + CTA, proximity triggers preview, guided tour mode, map hotspots, meeting request with marker, demo extended mode.

Landing Pages

consultant

3D Freelance Portfolio for Creative Consultant with Case Room and Workshop Videos

A 3D room where each table represents a workshop given by the creative consultant. Opening a table plays the workshop video with subtitles and attached materials (PDFs, slides). Includes a replay mode with scrubbing by sections (introduction, exercises, Q&A) and a synchronized notes panel that can be exported. Bookmark system by timestamp and auto summary generation (UI that prepares the package; actual generation can be delegated to backend). Proxies for scrubbing, LOD for furniture. Accessibility: subtitles, transcripts, prefers-reduced-motion. Analytics: workshops viewed, bookmarks created. **Deliverables:** index.html, styles.css, consultant3d.js, assets/ (workshop videos, models, PDFs). **Stack:** Three.js, video HTML5, GSAP, LazySizes. **Interactions:** Click table opens workshop panel with video + sections + notes + attachments bookmark at timestamp export notes generate summary package.

Landing Pages

coworking

3D Coworking Seating Map with Desk Previews and Reservations

An interactive 3D map of a coworking space showing hot-desks, dedicated desks and private offices. Each desk is a 3D object with metadata (number, capacity, outlets, monitor) and an 8-15s video preview showing desk views, lighting and ergonomics. Users can filter by type (hot-desk, dedicated, private), amenity (monitor, ergonomic chair) and availability; filters reorder and highlight desks with staggered 3D animation. Selecting a desk triggers a 700-900ms GSAP fly-to and the preview video plays on a 3D panel beside the desk; an HTML overlay shows price per hour/day, availability calendar and a Reserve button (UI simulation). Horizontal scrubbing over the preview for frame seeking, and a day/night toggle that morphs scene lighting. Performance: scrubbing proxies, high-quality on-demand releases textures after 30s inactivity. Accessibility: aria-labels on all desks, keyboard-accessible calendar with aria-live confirmations, prefers-reduced-motion reduces animations. Analytics: desks viewed, reservations started, filters used. Backend sync and video format recommendations included. **Deliverables:** index.html, styles.css, seatingMap3d.js, assets/ (GLB desk models, MP4 short desk videos, JSON availability). **Stack:** Three.js, video HTML5, WebSocket, GSAP. **Interactions:** Click desk opens panel with video preview + price + calendar + reserve, filters highlight/reorder desks, day/night lighting morph, fly-to on selection, texture release after inactivity.

Landing Pages

conference

3D Conference with Main Stage, Breakout Rooms and Highlight Clips

A virtual conference with a 3D main stage and multiple breakout rooms accessible from a lobby. The central stage has a large screen playing the main HLS stream and two side screens for highlight clips (summaries, interviews). Camera has predefined angles (stage, audience, side) with smooth GSAP transitions. Breakout rooms are intimate spaces playing recorded session videos with synchronized slides panels. On start, user sees an agenda overlay and can select sessions; choosing a session triggers a GSAP fly-to to the corresponding room and loads the video on the 3D screen. Moderators can mark timestamps in real-time to generate highlight clips which appear in a sidebar. Q&A panel syncs with video (questions anchored to timestamps). Replay button opens a modal with the selected segment. Performance: adaptive streaming, thumbnail preload, pause render on inactive tabs. Accessibility: live subtitles (if stream supports), post-event transcripts, aria on controls. Privacy: explain camera/mic before WebRTC activation. Metrics: plays per session, clips created, questions sent. CDN integration instructions and bitrate recommendations included. **Deliverables:** index.html, styles.css, conference3d.js, assets/ (HLS streams, highlight clips, GLB room models, voiceovers). **Stack:** Three.js, HLS.js, WebRTC (optional), GSAP, postprocessing. **Interactions:** Agenda session selection, fly-to room, predefined camera angles, moderator timestamps for highlight clips, Q&A anchored to video timestamps, replay modal, mark clips with keyboard shortcut (M), lobby return.

Landing Pages

hybrid event

3D Hybrid Event with In-Person Integration and Synchronized Streaming

A hybrid platform that syncs the in-person experience with a 3D online replica. The real venue broadcasts HLS and the 3D replica projects the stream on virtual screens; remote attendees see clips and alternative cameras synced with what happens on-site. Shared timestamp system via WebSocket to align replays and clips between in-person and remote attendees. UI allows selecting cameras (stage, audience, backstage) and creating synced clips shared in the event gallery. Live polls and Q&A displayed both in the physical room and the 3D replica. Performance: adaptive streaming, low-latency sync, pause render offscreen. Accessibility: live subtitles, transcripts, prefers-reduced-motion. Metrics: remote attendees, clips created, successful syncs. Technical recommendations for clock sync and tolerable latency. **Deliverables:** index.html, styles.css, hybrid3d.js, assets/ (HLS streams, clips, GLB venue models). **Stack:** Three.js, HLS.js, WebSocket, GSAP. **Interactions:** Camera selector (stage/audience/backstage), create synced clips with M key, live polls, timestamped Q&A, clip gallery, sync status indicator, 2D fallback.

Landing Pages

architecture

3D Architecture Portfolio — Studio flagship

A flagship studio portfolio built to showcase signature projects, hero renders, and premium positioning. A polished studio portfolio designed to present flagship projects, hero renders, and brand positioning. A studio showcase portfolio highlighting projects, renders, and walkthroughs. An architecture portfolio in light mode with a virtual plaza where each project has an entry point. Clicking a project triggers a guided camera walkthrough that visits key spaces. At points of interest, project videos play (interviews, construction timelapses, animated renders) projected on 3D panels or HTML overlays. Layer toggles for structure, finishes, and furniture — each activates/deactivates 3D models and adjusts materials. A before/after slider blends renders with real photos. Technical documentation includes PDF plan downloads and high‑resolution image gallery. Free WASD navigation and guided fly‑through mode. Hotspots with micro‑videos and technical notes appear on selection. LOD, culling, 1024px textures. Videos 1080p. Accessibility: subtitles, transcripts, prefers-reduced-motion, 2D version with video list. **Deliverables:** index.html, styles.css, arch3d.js, assets/ (GLB models, walkthrough videos, plan PDFs). **Stack:** Three.js, video HTML5, GSAP. **Interactions:** Walkthrough guided with videos per point of interest, layer toggles, before/after slider, plan downloads, free WASD mode.

Landing Pages

architecture

3D Architecture Portfolio — Client review route

A client-review portfolio structured as a presentation route for plans, scope, and before/after decisions. A concept-led architecture route that emphasizes narrative, spatial rhythm, and design exploration. A client-facing walkthrough portfolio built to present spaces, plans, and before/after stories. Build a 3D architectural portfolio with guided walkthroughs, project videos combining real footage with renders, and downloadable plans. **Deliverables:** index.html, styles.css, arch3d.js, assets/ folder with GLB building models, walkthrough videos, and PDF plans. **Stack:** Three.js, HTML5 video, postprocessing, GSAP. **Description:** Present architectural projects through 3D walkthroughs and project videos combining real shots with renders. The user can explore the building in 3D and, at key points, play videos showing construction, interviews, and technical details. **Video & plans integration:** Videos play in 3D panels or HTML overlays; plans and sections displayed as downloadable PDFs. Each point of interest has an asset package: video, photos, plan, and spec sheet. **Navigation controls:** Guided walkthrough with camera following a route; free mode with WASD/drag. Hotspots with microvideos and notes; "before/after" slider option. **Visual fidelity & performance:** LOD-optimized models; HDRI for realistic lighting; subtle postprocessing. 1080p videos for desktop, 720p for mobile; adaptive streaming. **Accessibility & documentation:** Subtitles, transcripts, and technical descriptions. ARIA on hotspots and role="dialog" for video modals. **Metrics:** Time in walkthrough, most-visited hotspots, plan downloads, video plays.

Landing Pages

architecture

3D Architecture Portfolio — Concept discovery tour

A concept-led tour that highlights spatial narrative, massing, and exploratory design ideas. A client-facing walkthrough landing built to review scope, plans, and project decisions in detail. A concept-heavy architecture version focused on guided tours and story-driven projects. A light mode architecture portfolio where each project has a virtual plaza entry point. Entering triggers a predefined camera route showing key spaces. At points of interest, project videos play including interviews, construction timelapses, and animated renders. Videos project on 3D panels or HTML overlays. Layer toggles for structure, finishes, furniture — each activates/deactivates GLB models and adjusts materials. A 'before/after' slider blends renders with real photos. Technical documentation: PDF plan downloads and high-res image gallery. Navigation: free WASD mode and guided fly-through. Hotspots with micro-videos and technical notes appear with reveal animation. LOD, culling, 1024px textures. 1080p video for desktop, 720p for mobile. **Deliverables:** index.html, styles.css, arch3d.js, assets/ (GLB models, walkthrough videos, PDF plans, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP. **Interactions:** Guided walkthrough with video per POI, layer toggles, before/after slider, PDF download.

Landing Pages

art museum

3D Art Museum with Guided Curation and Video Projections

Build a 3D curated art museum where each artwork has a curatorial video explaining context, technique, and anecdotes. The visitor can activate a guided curation that plays a video sequence and moves the camera with elegant transitions. **Deliverables:** index.html, styles.css, museum.js, assets/ folder with curatorial videos, artwork models, and metadata. **Stack:** Three.js, HTML5 video, GSAP, search index. **Description:** A 3D curated museum tour where each artwork features a curatorial video. The visitor can activate a guided curation that plays a sequenced video tour with camera transitions. Free explore mode also available. **Video & metadata presentation:** Side panel with transcript and technical sheet; video in 3D panel or overlay. Language options and subtitles; downloadable catalog PDF. **Curatorial interactions:** "Curator" mode with voiceover and chapter markers; "Explore" free mode. Favorites and personal notes saved locally. **Accessibility:** Subtitles, artwork descriptions for visually impaired, ARIA on controls.

Landing Pages

artist

3D Freelance Portfolio for 3D Artist with Reels, Breakdowns and Process Videos

A 3D gallery where each artwork has a reel and a breakdown video showing the pipeline (modeling, texturing, lighting). Selecting a work triggers a camera fly‑to and the breakdown plays with overlays showing nodes and settings; the user can pause on any frame and see exact parameters (shaders, maps). A 'Compare' mode shows before/after and a button exports the settings as JSON. Proxy videos for scrubbing, LOD for models. Accessibility: subtitles, transcripts. Analytics: breakdowns viewed, settings exported. **Deliverables:** index.html, styles.css, artist3d.js, assets/ (reels, breakdown videos, models). **Stack:** Three.js, video textures, WebAudio API, GSAP. **Interactions:** Click artwork opens breakdown with synced pipeline node overlays, compare before/after, export settings JSON.

Landing Pages

charity gala

3D Charity Gala with Stage, Testimonial Videos and Live Auction

An elegant virtual charity gala: central stage for presentations, panels for testimonial videos (60-180s) projected on 3D screens with subtitles and transcripts, and a live auction section. Auction managed via UI: each lot has a 3D card with video and description; users bid via form (UI simulation) and the auction shows a timeline with simulated bids. During the gala, the camera alternates between presenter and testimonial screens with cinematic transitions; key moments (announcements, winning bids) generate highlight clips saved to a gallery. Donor mode shows benefits and allows receipt download. Performance: adaptive streaming, LOD for decorations. Accessibility: subtitles, transcripts, aria on forms, prefers-reduced-motion. Privacy: explain data use for donations. Metrics: simulated donations, bids, testimonial plays. Legal recommendations for auctions and data handling included. **Deliverables:** index.html, styles.css, gala3d.js, assets/ (testimonial videos, GLB stage models, audio tracks). **Stack:** Three.js, HLS.js, WebRTC, GSAP. **Interactions:** Auto camera cycling, auction bidding with timeline, donor mode with receipt download, highlight clips with M key, testimonial video panels.

Landing Pages

cinematic

Cinematic 3D Scene with Integrated Short Film and Timeline Control

Build an immersive cinematic 3D scene where a chapter-based short film drives lighting, camera, and particles in real time through a scrubbable timeline. **Deliverables:** index.html, styles.css, cinema.js, assets/ folder with chaptered short film, stem audio tracks, models, and LUTs. **Stack:** Three.js, HTML5 video, postprocessing (bloom, color grading), GSAP for timeline. **Description:** A short film integrates into a 3D scene: floating panels play chapters while scene lighting, camera, and particles react in real time to the audio track and video markers, creating an immersive audiovisual narrative. **Timeline structure:** Short film divided into chapters (cap1, cap2…). Each chapter has JSON metadata with start, end, cameraCue, lightingCue, particleCue. An interactive timeline allows scrubbing; moving the scrubber smoothly interpolates camera and effects between cues. **Scrubbing & chapter jumping:** GSAP interpolates camera and postprocessing params (exposure, bloom) toward the target chapter values. Audio crossfade between stems when chapter changes. Synchronized subtitles and notes appear. **Video & texture integration:** Videos as textures on 3D planes for projections; HTML overlays for subtitles and accessibility. Low-resolution proxy versions used during scrubbing; high-quality versions loaded on pause. **Controls & microinteractions:** Play/Pause, Chapters, Cinematic Mode (auto camera dolly), Explorer Mode (free control). Chapter markers with thumbnail previews; share link with timestamp. **Accessibility & fallback:** Full transcript and linear version of the short film with navigable chapters. prefers-reduced-motion disables non-essential camera movements and offers direct cuts between chapters. **Visual quality & performance:** LUTs for color grading in postprocessing; HDRI for realistic lighting. Aggressive LOD and culling; pause render when canvas is off-viewport. Preload audio stems; AudioContext for precise sync. **Testing & metrics:** Measure scrubbing latency, chapter load times, chapter drop-off rate. Test on desktop and mobile across varied network profiles.

Landing Pages

typography

3D Cinematic Typography Show with Background Video and Musical Control

Build a typography show where 3D letters react to music and an atmospheric background video. The user can select audio stems that alter animation and color grading. **Deliverables:** index.html, styles.css, typeShow.js, assets/ folder with atmospheric video, audio stems, and typography models. **Stack:** Three.js, WebAudio API, HTML5 video, GSAP. **Description:** A typographic spectacle where 3D letters react to music and an atmospheric background video. Floating metallic letters respond to real-time audio FFT analysis. Video cues trigger material changes and typographic morphing. **Audio-video-typography sync:** Real-time audio analysis (FFT) generates movement parameters. Video cues trigger material changes. Letters pulse, rotate, and scale with frequency bands. **Controls:** Stem selector, video scrubbing, mood presets (calm, energetic). Frame export for moodboards. **Accessibility:** Subtitles for any narration; prefers-reduced-motion to disable intense movements.

Landing Pages

classroom

3D Light Mode Classroom with Video Lessons and Synchronized Simulations

A virtual classroom in light mode with pale wood and navy accents. Each lesson combines a tutorial video with a synchronized 3D simulation. The video acts as master clock: timeupdate events fire cues that update the simulation (positions, forces, parameters). For a dynamics lesson, the video shows the experiment and the simulation reproduces the exact pendulum trajectory; the student can pause and manipulate parameters (mass, friction), and the simulation recalculates in real time. UI includes a timeline with chapter markers; scrubbing uses low-res proxy video while updating the simulation frame-by-frame. Lessons are divided into loadable modules (pendulum, inclined plane, spring). For exercises, the student receives a prompt and adjusts parameters to reach a target; on completion a solution video plays. Synchronization: AudioContext for audio/video alignment, GSAP for 3D animation interpolation. Heavy physics calculations run in a Web Worker. State is saved per module in IndexedDB for session resume. **Deliverables:** index.html, styles.css, classroom3d.js, assets/ (videos, GLB models, datasets, transcripts, SRT subtitles).

Landing Pages

classroom

Elegant 3D Classroom with Synchronized Video Lessons and Interactive Exercises

Build an elegant 3D virtual classroom where video tutorials and 3D simulations are fully synchronized, with interactive sandbox exercises. **Deliverables:** index.html, styles.css, classroom.js, assets/ folder with lesson videos, 3D instrument models, and datasets. **Stack:** A-Frame or Three.js, HTML5 video, WebAudio API, GSAP, Web Workers for calculations. **Description:** Multimedia lessons where each module combines a video tutorial with a synchronized 3D simulation. For example, in a physics lesson the video explains an experiment while the 3D simulation reproduces each step — allowing the student to pause, scrub, and modify parameters in real time. **Video-simulation sync:** Video acts as master clock; simulation listens to timeupdate events and applies predefined states (positions, forces) at key moments. GSAP Timeline coordinates 3D animations with video chapter markers. Scrubbing the video advances/rewinds the simulation frame-by-frame. **Interactive exercises:** Sandbox — change variables (mass, friction) and see real-time results. Challenge — complete a task within a time limit; on completion a solution video plays with explanation. Comparator — run two configurations side by side with synchronized videos. **Video presentation:** Segmented clips (30–120s) with SRT and transcripts. Full-lesson fullscreen mode with notes and questions overlay. Videos optimized for streaming with playsinline on mobile. **Controls & accessibility:** Downloadable subtitles and transcripts. Speed controls (0.5x, 1x, 1.5x) that also affect the simulation. prefers-reduced-motion reduces animations and offers a static version with graphics. **Precision & reproducibility:** Deterministic simulations with fixed seed; export parameters as JSON to replay sessions. Interaction logging to replay student sessions and generate automated feedback. **Performance:** Heavy calculations in Web Workers; 3D render separated from physics loop. Lazy-load modules per lesson; free memory on module switch. Tested on low-end devices for acceptable minimum experience. **Educational metrics:** Video view time, attempts per exercise, most-tested parameters, success rate. Export instructor reports with timestamps linked to video events.