Liquid glass 3D hero section with refractive cuboid
Liquid glass 3D hero section with refractive cuboid is a 772-second Claude Opus motion design reference by @viktoroddy, built around Three.js, Canvas, WebGL. GOAL: Copy this UI motion prompt, keep the creator's frame counts and palette, and adapt the subject for your own launch film.
@viktoroddyView post
Prompt
GOAL:
Build a single standalone index.html file (inline CSS + inline JS, no local assets, no build step) containing ONE full-screen hero section: a black "Design World" landing hero with a rotatable 3D glass cuboid in the centre that refracts a huge background headline with chromatic dispersion. Recreate it exactly to the spec below.
MOTION:
==================================================
1. EXTERNAL RESOURCES (use these exact URLs)
==================================================
- Font: Google Fonts Poppins, weights 300/400/500/600/700/800
- Three.js r169 via importmap:
"three": "https://t.co/NVuwWT0I9h"
"three/addons/": "https://t.co/MRmI6UHfDk"
Imports: GLTFLoader (loaders/GLTFLoader.js), mergeVertices + mergeGeometries (utils/BufferGeometryUtils.js), RoundedBoxGeometry (geometries/RoundedBoxGeometry.js).
- 3D model (rounded cube GLB, CORS-enabled, load directly, do NOT download or replace):
const MODEL_URL = 'https://t.co/YeqtaFGhPu';
If it fails to load, fall back to new RoundedBoxGeometry(1, 1, 1, 8, 0.12).
Page : "Design World — Explore New Ideas".
==================================================
2. PAGE STRUCTURE (HTML)
==================================================
Explore New Ideas
DesignWorld
HomePortfolioContact Us
[left-arrow SVG]
[right-arrow SVG]
Let's Build theFuture of Design.
Explore Now
07
Loading model
Arrow SVGs: viewBox 0 0 24 24, fill none, stroke currentColor, stroke-width 2.6, round caps/joins.
prev path: "M19 12H5M11 6l-6 6 6 6" next path: "M5 12h14M13 6l6 6-6 6"
IMPORTANT: The big "Explore / New / Ideas" headline is NOT HTML text. It is drawn onto a 2D canvas inside WebGL so the glass cube can refract it (see section 4).
Author original
Build a single standalone index.html file (inline CSS + inline JS, no local assets, no build step) containing ONE full-screen hero section: a black "Design World" landing hero with a rotatable 3D glass cuboid in the centre that refracts a huge background headline with chromatic dispersion. Recreate it exactly to the spec below.
==================================================
1. EXTERNAL RESOURCES (use these exact URLs)
==================================================
- Font: Google Fonts Poppins, weights 300/400/500/600/700/800
- Three.js r169 via importmap:
"three": "https://t.co/NVuwWT0I9h"
"three/addons/": "https://t.co/MRmI6UHfDk"
Imports: GLTFLoader (loaders/GLTFLoader.js), mergeVertices + mergeGeometries (utils/BufferGeometryUtils.js), RoundedBoxGeometry (geometries/RoundedBoxGeometry.js).
- 3D model (rounded cube GLB, CORS-enabled, load directly, do NOT download or replace):
const MODEL_URL = 'https://t.co/YeqtaFGhPu';
If it fails to load, fall back to new RoundedBoxGeometry(1, 1, 1, 8, 0.12).
Page : "Design World — Explore New Ideas".
==================================================
2. PAGE STRUCTURE (HTML)
==================================================
Explore New Ideas
DesignWorld
HomePortfolioContact Us
[left-arrow SVG]
[right-arrow SVG]
Let's Build theFuture of Design.
Explore Now
07
Loading model
Arrow SVGs: viewBox 0 0 24 24, fill none, stroke currentColor, stroke-width 2.6, round caps/joins.
prev path: "M19 12H5M11 6l-6 6 6 6" next path: "M5 12h14M13 6l6 6-6 6"
IMPORTANT: The big "Explore / New / Ideas" headline is NOT HTML text. It is drawn onto a 2D canvas inside WebGL so the glass cube can refract it (see section 4).
Questions
What is this ui motion prompt for?
It is a Claude Opus motion design brief for “Liquid glass 3D hero section with refractive cuboid”. Paste it into Claude and keep the timings already written in the prompt.
Where is the original film?
The creator is @viktoroddy. Use View post to open the X video this prompt belongs to.