website-3d

Name: website-3d
Availability: InStock
Author: marcoapereirav-arch

Create scroll-driven landing pages that sync video playback with user scroll.

Updated Aug 23, 2026

Search Tags:#video #canvas #design-system #landing-page #glass-morphism #scroll #frame-sequence

Ready to run

npx skills add https://github.com/marcoapereirav-arch/nvision-saas-factory --skill website-3d-marcoapereirav-arch

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: website-3d
Source: https://github.com/marcoapereirav-arch/nvision-saas-factory/tree/main/saas-factory/.claude/skills/website-3d
Command: npx skills add https://github.com/marcoapereirav-arch/nvision-saas-factory --skill website-3d-marcoapereirav-arch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Traditional landing pages demand heavy design effort and complex animations to achieve cinematic, scroll-driven experiences. This Skill enables rapid creation of scroll-controlled landing pages that synchronize video playback with user scrolling, delivering high-conversion visuals with Apple-like polish.

Core Features & Use Cases

Scroll-driven frame sequence on a canvas to achieve buttery-smooth video playback synced to scroll.
Annotation cards with glass-morphism design that reveal content as the user scrolls.
Copywriting frameworks (AIDA/PAS) applied to hero, features, and CTAs for high engagement.
Use Case: Launch a product with a cinematic landing page that demonstrates the product in action through video-on-scroll.

Quick Start

Provide a product video and a brief brand/story, then generate a scroll-driven landing page with Apple-style visuals.

Frequently Asked Questions about website-3d

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a scroll-driven video landing page that syncs playback with user scrolling?▼

To build a scroll-driven video landing page, you use a canvas-based frame sequence technique that maps video playback progress to scroll position. This renders pre-rendered frames on an HTML canvas to deliver buttery-smooth cinematic playback synced to user scrolling.

What is a canvas frame sequence and how does it achieve smooth scroll video playback?▼

A canvas frame sequence is a technique that loads pre-rendered video frames and draws them onto an HTML canvas element. By linking the canvas frame index directly to scroll position, it bypasses native video buffering limits to achieve smooth scroll video playback.

Do I need a pre-rendered product video to build a scroll-controlled landing page?▼

Yes, you need a product video or a sequence of pre-rendered frames to build a scroll-controlled landing page. The canvas-based frame sequence technique requires these visual assets to map frame progression accurately to the user's scroll depth.

Can I apply glass-morphism annotation cards to a scroll-driven landing page?▼

Yes, you can apply glass-morphism annotation cards to a scroll-driven landing page. These cards overlay the canvas video sequence and use copywriting frameworks like AIDA or PAS to reveal marketing content and features dynamically as the user scrolls.

What is the best way to design an Apple-style cinematic product launch page?▼

The best way to design an Apple-style cinematic product launch page is combining a scroll-driven canvas frame sequence with glass-morphism annotation cards. Applying AIDA/PAS copywriting frameworks to the hero and CTAs ensures the scroll progress communicates value and features effectively.