3D & Hyperrealism

Stylegeneral

Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive. Best for Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR.

Depth realistic textures 3D models spatial navigation tactile skeuomorphic elements rich detail immersive

#001F3F

#228B22

#800020

#FFD700

#C0C0C0

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: 3D & Hyperrealism

Keywords: Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive
Primary colours: Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0
Secondary colours: Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)
Effects & animation: WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)
Best for: Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR
Do not use for: Low-end mobile, performance-limited, critical accessibility, data tables/forms

## Prompt keywords
Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.

## CSS / technical
transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()

## Implementation checklist
☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms

## Design system variables
--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source