Layout
Composition principles
Lead with a full-viewport story hero, then sequence feature content in wide bands with strong depth cues and responsive spacing.
Material 3 / Published Template
3D Story- Veldara
An immersive 3D world-building landing page for Veldara with layered scenes, product storytelling, and cinematic web motion.
Prompt reference v1Checking Prompt access...
Interaction
Behavior and access
Use scroll-linked scene transitions, subtle parallax, hover feedback, and reduced-motion fallbacks while keeping calls to action clear.
Implementation
Engineering boundaries
Semantic HTML, responsive CSS, and JavaScript power the packaged single-file motion experience and its layered 3D presentation.
Design system
Material 3 token ledger
Google's current open design system for adaptive digital products.
Color roles
- model
- role-based color scheme
- requiredRoles
- surface, onSurface, primary, secondary, error
Typography
- approach
- display, headline, title, body, and label roles
- requirements
- responsive hierarchy, legible labels
Spacing
- approach
- adaptive layout rhythm
- baseUnitPx
- 4
Component rules
- touch
- Keep interactive targets large enough for touch input.
- navigation
- Choose navigation patterns according to window size and destination count.
Classification
Where this template fits
Categories
Styles
Industries
Technologies
Continue reading
Related templates
Transform Data- AI
HERO SECTION CREATION PROMPT
Golden Portal- Digital Archive
A React + Vite + TypeScript + Tailwind CSS landing page called "Digital Archive" -- a high-end art gallery/studio showcase website. It should be dark, cinematic, and editorial in style. Use ONLY lucide-react for icons. No other UI libraries.
Cosmos Interface
<meta name="viewport" content="width=device-width, initial-scale=1.0" />