Frontend & UI
WebGL 3D Object
A lit Three.js hero mesh with PBR material and real shadows.
What it is
A Three.js recipe for one faceted hero object: icosahedron geometry, MeshStandardMaterial, perspective camera, key and rim lights, shadow plane, slow float rotation.
Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero obje
Why it matters for design
- Real geometry and lighting produce edges, highlights, and shadows CSS transforms cannot fake.
- Material presets cover premium metal, soft ceramic, and glow-tinted tech looks.
- Motion is limited to slow rotation and small bobbing, so copy stays primary.
What it covers
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
How to install
WebGL 3D Object
-
Clone the repo.
git clone https://github.com/MengTo/Skills -
Point Codex at the skill file.
agent-skills/web-design/webgl-3d-object/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Add the square canvas shell, then run the Three.js initializer on it.
-
Set color, metalness, roughness, and emissive to match brand mood.
-
Confirm resize handling and teardown of geometry, material, and renderer.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗More Codex design plugins
Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids. 
Design Systems What it does Stitch Design Taste Writes a DESIGN.md that steers Google Stitch toward non-generic screens. 
Frontend & UI What it does image-to-code Generates design images first, analyzes them, then builds matching frontend code. 
Frontend & UI What it does imagegen-frontend-mobile Generates premium mobile app screen flows as images, not code. Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.