12 resources

hotspots Prompts and Templates

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

Browse this tag by category

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.

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

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

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

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

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

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

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

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

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.