Skip to the content
FilCommunityWorkflowsDocsOpen Fil
Build a full-screen Three.js scene that recreates the reference image: a black void with a tilted tablet (thin dark bezel…
A web page: run it in Fil

Code · Claude Opus 5.5

Build a full-screen Three.js scene that recreates the…

Build a full-screen Three.js scene that recreates the reference image: a black void with a tilted tablet (thin dark bezel, rounded corners, flat screen with a smooth white-to-black vertical gradient) floating at an angle in the centre, surrounded by large and small shattered grey stone slabs and debris frozen mid-explosion. Create the rocks procedurally from displaced, faceted icosahedron and box geometries with grey noise-based roughness and bump textures generated in code, in varied sizes, some large behind the tablet and some small scattered in the foreground. Monochrome palette, dramatic soft key light from the upper left with a faint rim light, subtle depth of field or fog into the black. Animate slowly: rocks drift and rotate gently, the tablet hovers with a slight float, and the camera parallaxes subtly with mouse movement. Responsive full-viewport canvas, load Three.js from a CDN, no UI, no text, no overlays.

Meng To@shadownessguy0097
Model
Claude Opus 5.5
Made by
Meng To
Shared
Likes
0
Open in Fil

Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.

More like this

YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…YouTube thumbnail, 16:9. The man in the first reference photo, keeping his face, short black swept-up hair and skin tone…YouTube thumbnail, 16:9. The man in the first reference photo, keeping his face, short black swept-up hair and skin tone exactly, on the…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…YouTube thumbnail, 16:9. The man in the first reference photo, keeping his face, short black swept-up hair and skin tone…YouTube thumbnail, 16:9. The man in the first reference photo, keeping his face, short black swept-up hair and skin tone exactly, on the…YouTube thumbnail, 16:9. The man in the first reference photo, keeping his face, short black swept-up hair and skin tone…YouTube thumbnail, 16:9. The man in the first reference photo, keeping his face, short black swept-up hair and skin tone exactly, on the…Build a self-contained Three.js scene of the dark matte-black Mac-style keyboard shown in the reference image, modelled…Build a self-contained Three.js scene of the dark matte-black Mac-style keyboard shown in the reference image, modelled entirely in code…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on their chin and…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery long-limbed character in…- Shopping - Marketing - E-commerce - Social media Reference (SKILL (3).md): --- name: illustration-isometric-mono…- Shopping - Marketing - E-commerce - Social media Reference (SKILL (3).md): --- name: illustration-isometric-mono description: Draws…- Shopping - Marketing - E-commerce - Social media Reference (SKILL (3).md): --- name: illustration-isometric-mono…- Shopping - Marketing - E-commerce - Social media Reference (SKILL (3).md): --- name: illustration-isometric-mono description: Draws…