# 3D & Hyperrealism > UI that looks rendered in a 3D studio: glossy spheres and slabs, thick bevelled buttons, deep perspective and dramatic spotlight on a dark stage. - Nickname: Rendered 3D - Also called: Hyperrealistic UI, 3D UI, Render style - Category: Soft & Dimensional - Moods: Bold, Techy, Luxury, Playful - Industries: Gaming, Web3 & Crypto, AI Products, E‑commerce, Creative & Portfolio - Style page: https://uilingo.dev/styles/3d-hyperrealism/ 3D & Hyperrealism treats the screen as a dark product stage. Objects are shaded like real renders — specular highlights, rim light, bevelled edges, reflections and long contact shadows — and the layout leans into depth with perspective tilts, floating spheres and extruded headline type. Buttons are thick glossy keys that physically travel down when pressed. Saturated orange, cyan and violet light sources cut through near-black, giving a cinematic, premium, game-like energy. ## Best for - Game launches, esports and tournament hubs - Hardware and product reveal pages - Collectibles, NFTs and reward stores - Bold app onboarding moments ## Avoid for - Text-heavy reading or documentation - Low-end devices and data-saver contexts - Calm healthcare or government services ## Do - Light every object from one cool key light (top-left, rgba(150,165,255,.28)) plus up to three rim lights in orange #FF7A1A, cyan #38BDF8, violet #C084FC - Give buttons real thickness: a 6px darker "side" shadow that collapses on press - Use perspective (900–1400px) on hero objects, the showcase panel and the donut; card tilt only on hover - Keep body text on flat dark panels so it stays readable, except the single featured orange render card, which takes dark #1A0A00 text ## Don't - Don’t tilt forms, tables or long text - Don’t use flat, unshaded colour blocks — every object needs a highlight and a shadow - Don’t animate many 3D objects at once without prefers-reduced-motion - Don’t use more than three rim-light colours besides the cool key light ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "3D & Hyperrealism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line UI that looks rendered in a 3D studio: glossy spheres and slabs, thick bevelled buttons, deep perspective and dramatic spotlight on a dark stage. Design keywords: rendered 3D objects, glossy spheres, deep perspective tilt, dramatic spotlight, extruded headline type, thick bevelled buttons, rim light and reflections, dark product stage. ## Visual language The interface is a dark product stage under studio lights. Near-black space (#07080F) is lit by one cool key light from the top-left plus at most three coloured rim lights (orange, cyan, violet); on it float rendered objects — glossy spheres with specular highlights, a tilted violet torus, bevelled slabs — each casting a long soft contact shadow. Headlines are extruded white letters with a stepped side and a glow, buttons are thick glossy keys that sink 6px when pressed, and hero objects sit in deep perspective. Cinematic, premium and game-like. ## Signature details (must be visible) - Stage background: one cool key light rgba(150,165,255,.28) at 22% -8% plus at most three coloured rims chosen from orange #FF7A1A (right), violet #C084FC (bottom-left) and cyan #38BDF8 (floor glow), on #07080F; hero min-height: min(100vh, 900px). The three-rim limit is per page background: component glows such as the CTA spotlight and button halos reuse the same three hues and don't count - Glossy spheres (declared extras), each radial-gradient(circle at 32% 26%, …) plus a 0 60px 80px -30px black contact shadow and a coloured halo. Orange: #FFF3E0 0 4%, #FFB36E 14%, #FF7A1A 38%, #A33A00 72%, #3A1200 100%. Cyan: #F0FBFF 0 4%, #8EDCFF 14%, #38BDF8 38%, #0A5E8F 72%, #021C2E 100%. Violet: #FBF3FF 0 4%, #DDB6FF 14%, #C084FC 38%, #6B21A8 72%, #1E0838 100% - Extruded display type: white text with text-shadow 0 1px 0 #D9DCF2, 0 2px 0 #BCC0DE, 0 3px 0 #A0A5CA, 0 4px 0 #858BB5, 0 5px 0 #6A709F, 0 6px 0 #50568A, 0 7px 0 #3A4070, 0 12px 18px rgba(0,0,0,.7), 0 22px 50px rgba(255,122,26,.22). Small variant for h1/h2, stat and KPI numbers: 0 1px 0 #BCC0DE, 0 2px 0 #858BB5, 0 3px 0 #50568A, 0 6px 10px rgba(0,0,0,.6). Thai display: at most ~14 base consonants/vowels per line, not counting tone marks - Thick keys: primary gradient #FFB36E→#FF7A1A 48%→#E05A00, inset 0 2px 0 rgba(255,255,255,.55), side 0 6px 0 #8F3300, glow 0 16px 26px -8px rgba(255,122,26,.7); :active translateY(6px) and the side collapses; focus-visible adds 0 0 0 3px #07080F, 0 0 0 5px #38BDF8 on top of the side shadow; disabled = a flat recessed slab: background #14172A, text #5E6590, box-shadow inset 0 2px 6px rgba(0,0,0,.8), no side, no glow, no transform - Rendered slabs for cards: a 115deg specular sheen over linear-gradient(165deg,#232848,#14172A 46%,#0B0D1B), 1px rgba(255,255,255,.09) edge, inset top highlight, inset dark bottom bevel, 0 22px 44px -16px black - Perspective: allowed on hero objects and the showcase panel (perspective 1400px, rotateY -10deg, rotateX 4deg), the dashboard donut (rotateX 38deg, like a 3D ring) and card hover only (rotateX 5deg rotateY -4deg). Never on forms, tables or paragraphs - Recessed wells for inputs and tracks: #090B16 with inset 0 3px 8px rgba(0,0,0,.85) and a 1px rgba(255,255,255,.08) border when unfocused - Torus = 230px circle, radial-gradient(circle, transparent 46%, #2A0B4A 47%, #8B4FD9 55%, #E2C6FF 60%, #A764F0 65%, #3B1366 74%, transparent 75%), transform perspective(600px) rotateX(62deg) rotateZ(-18deg), filter drop-shadow(0 30px 20px rgba(0,0,0,.8)) - Declared extras (everything else comes from the tokens): key gradients orange #FFB36E/#E05A00, navy #3A4170→#232848→#181C36, cyan #8EDCFF→#38BDF8→#0B8FD0; key sides #8F3300 / #0A0C18 / #075A86; torus #2A0B4A / #8B4FD9 / #E2C6FF / #A764F0 / #3B1366; well #090B16; slab #232848 / #14172A / #0B0D1B; disabled #14172A / #5E6590; logo and table-header grey #8D94BC; featured-card text #1A0A00 / #2B1300; the sphere stops above - Unbounded headings + Sora body; Kanit headings + K2D body for Thai. Display and headings use weight 700 (Unbounded/Kanit 700); 800 is loaded only for optional numerals. In mixed-script labels wrap Latin runs in so uppercase and -0.02em tracking never reach Thai ## Design tokens — use these exact values Colours (dark mode): - background #07080F - surface #14172A - surface-2 #0E1020 - text #F3F5FF - text-muted #A7AED4 - primary #FF7A1A (text on it #1A0A00) - secondary #38BDF8 (text on it #04131D) - accent #C084FC - border rgba(255,255,255,0.12) - success #34D399 · warning #FBBF24 · danger #FB7185 - chart series #FF7A1A, #38BDF8, #C084FC, #34D399, #FBBF24 Radius: sm 10px, md 14px, lg 22px, xl 30px, pill 999px Border width: 1px Shadows: sm `inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 14px -4px rgba(0,0,0,0.7)`, md `inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -2px 0 rgba(0,0,0,0.45), 0 22px 44px -16px rgba(0,0,0,0.85)`, lg `inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -3px 0 rgba(0,0,0,0.5), 0 40px 80px -24px rgba(0,0,0,0.9)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 200ms cubic-bezier(.2,.9,.25,1.2) ## Typography (Latin + Thai) - Headings: Unbounded 600/700/800 with Thai fallback Kanit 600/700/800 - Body: Sora 400/500/600 with Thai fallback K2D 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Sora:wght@400;500;600&family=Kanit:wght@600;700;800&family=K2D:wght@400;500;600&display=swap - CSS stacks: heading `"Unbounded", "Kanit", system-ui, sans-serif`; body `"Sora", "K2D", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 6vw, 5.4rem), heading weight 700, heading tracking -0.02em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Kanit has the same wide, heavy, squared-off stance as Unbounded for extruded headlines, and K2D’s geometric techno shapes match Sora in body copy. ## Components - Primary button: thick orange glossy key with dark text; hover rises 2px and brightens; press drops 6px onto its base - Secondary button: dark navy key (#3A4170→#232848→#181C36) with a top rim highlight and a 6px #0A0C18 side - Cards: bevelled dark slabs; hover tilts in 3D (rotateX 5deg rotateY -4deg) and lifts 6px; the featured bento card is a glowing orange render (#FFB36E→#FF7A1A→#E05A00) with a #1A0A00 heading and ≤ 2 lines of #2B1300 copy and a violet sphere peeking out; all other body text stays on dark slabs - Icon holders: small glossy spheres in cyan, violet and orange with dark glyphs on top - Inputs: recessed black wells with a 1px rgba(255,255,255,.08) border; focus = cyan border, 3px cyan ring and a soft cyan glow - Switch: recessed track with a chrome ball thumb; ON lights the track cyan with a glow - Chips and segmented: dark navy keys with 4px #0A0C18 sides; the active chip is a cyan glossy key linear-gradient(#8EDCFF, #38BDF8 48%, #0B8FD0) with a 4px #075A86 side - Charts: neon-glow lines with drop shadows, bars as shaded cylinders, heatmap cells with bevel highlights; the donut is the hero widget of its card — about 200px, tilted rotateX(38deg) like a 3D ring, centred with the legend below it - Mobile tab bar: floating dark glossy capsule with a 6px base; the active icon sits on a glossy orange sphere - Split nav: logo left, links centred inside a dark recessed key-track (#090B16 well, the active link is a raised navy key), sign-in plus the orange key on the right - Logos = one row of muted #8D94BC Unbounded wordmarks with violet hexagon glyphs, no cards - FAQ = slab rows with a recessed #090B16 answer well and an orange + / − key ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: split style. Sections in order: hero → logos → features → showcase → stats → pricing → faq → cta. Feature section as bento. Immersive hero (min-height min(100vh, 900px)): centred extruded headline on the dark stage with a big orange sphere, a smaller cyan sphere and a tilted violet torus floating around it, plus a cyan floor glow. Split nav with the links in a recessed centre track. Features as a 4-column bento of 6 bevelled slabs — one 2×2 glowing orange render card + 3 singles + 2 wides, filling a 4×3 grid with no empty cells; a perspective-tilted showcase panel; stats on slabs with extruded numbers; pricing as slabs; a CTA lit by an orange spotlight with spheres at the corners. Dashboards keep widgets flat and readable but use slab cards, glowing lines, cylinder bars and a tilted donut, with an icon rail whose active item is an orange key. ## Content Use realistic product copy (fictional brand) suited to: Game launches, esports and tournament hubs. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Light every object from one cool key light (top-left, rgba(150,165,255,.28)) plus up to three rim lights in orange #FF7A1A, cyan #38BDF8, violet #C084FC - Give buttons real thickness: a 6px darker "side" shadow that collapses on press - Use perspective (900–1400px) on hero objects, the showcase panel and the donut; card tilt only on hover - Keep body text on flat dark panels so it stays readable, except the single featured orange render card, which takes dark #1A0A00 text ## Don't - Don’t tilt forms, tables or long text - Don’t use flat, unshaded colour blocks — every object needs a highlight and a shadow - Don’t animate many 3D objects at once without prefers-reduced-motion - Don’t use more than three rim-light colours besides the cool key light - Flat unshaded fills — every object needs a highlight, a core shadow and a contact shadow - Matte pastels on a light page — that is Claymorphism - Leather, paper, stitching and linen textures — that is Skeuomorphism - Tilting forms, tables or paragraphs; perspective is for hero objects, the showcase, the donut and card hover - More than three rim-light colours besides the cool key light, or light from different directions - Continuous heavy animation without a prefers-reduced-motion fallback ## Stack notes One self-contained HTML file with a