Layout
Composition principles
Use a full-screen hero followed by spacious portfolio sections, strong vertical rhythm, oversized display type, and responsive full-width media.
Material 3 / Published Template
3D Portfolio-3D
A dark 3D creator portfolio for Jack with immersive hero visuals, animated typography, selected work, services, and contact sections.
Prompt reference v1Checking Prompt access...
Interaction
Behavior and access
Reveal content with smooth entrance motion, keep navigation and calls to action responsive, and preserve readable contrast across animated sections.
Implementation
Engineering boundaries
React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React; the packaged HTML is the source motion artifact used to render the preview.
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
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" />