Liquid Chrome Blob

About this style

Metaballs, implicit surfaces that swell together when they come close, date back to early-1980s computer graphics research, and polished liquid metal is a recurring premium look in music, fashion and tech branding. Chrome has no color of its own: it is entirely a picture of its surroundings, which is why the craft lies in the studio lighting, the long strip and softbox reflections product photographers use on real metal. Done well it reads as luxury; done badly it reads as a default shader.

<inputs>
- BRAND wordmark. Default: "ORRIVA".
- TAGLINE. Default: "Formed in motion".
- LIGHT TINTS for the warm and cool softboxes. Default: #FFD7B0 and #A9C4FF.
- BACKDROP. Default: #08090B.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
A mirror-chrome mass buds into droplets that orbit and fuse with real surface tension, then pulls back into one perfect sphere above the wordmark. A luxury product film, not a shader demo.
- Geometry: MarchingCubes (three/addons/objects/MarchingCubes.js), resolution 72, 5–7 balls, rebuilt every seek with reset(), addBall(), update(). Centers follow Lissajous paths (periods 4–7s, seeded phases); strengths ease, never pop.
- Material: MeshPhysicalMaterial, color #FFFFFF, metalness 1, roughness 0.04, clearcoat 1, clearcoatRoughness 0.03, envMapIntensity 1.2. Smooth normals only.
- Studio, which is the whole look: build your own environment scene (black room, a long thin overhead strip at emissive intensity 6, a big warm key softbox left, a narrow cool rim strip behind right, a dim floor card), bake it once with PMREMGenerator.fromScene and use it as scene.environment, never as the visible background.
- Renderer: ACESFilmic tone mapping, sRGB output, antialias; camera fov 28. Behind the transparent canvas (alpha: true), a radial gradient from #1A1C21 at center to the backdrop at the edges.
- Rotate the environment slowly (8°/s max) so highlight streaks glide over the surface; that slide sells liquid metal.
- Type (HTML over the canvas, centered, top at 78% height): wordmark in Unbounded 500, 56px, letter-spacing 0.38em, #E8EAED; tagline in Inter 400, 18px, letter-spacing 0.08em, #8B9099.
- Motion: easeInOutSine orbits, easeOutQuart camera, a 120–180ms stretched neck before any two balls part.
Banned: iridescent hue shifts, bloom over everything, lens flares, faceted surfaces, roughness above 0.12, an unlit grey default material, fast spins, a visible HDRI photo, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.5s: one sphere in darkness; a highlight streak crosses it; camera dollies z 7.0 → 6.4.
- 1.5–3.5s: two droplets bud off and orbit; necks stretch and snap.
- 3.5–6.0s: 5–7 balls swirl, merge in pairs, split again; the mass stays under 45% of frame height.
- 6.0–7.5s: everything pulls in and fuses into one sphere that overshoots 3% in scale and settles.
- 7.5–8.5s: sphere rises 0.4 units; wordmark tracking tightens from 0.6em to 0.38em as it fades in (900ms, easeOutCubic).
- 8.5–9.2s: tagline rises 10px and fades in.
- 9.2–10.0s: hold; only the reflections drift.
For other lengths, scale the swirl; keep fuse and type timings.
</structure>

<build>
- One self-contained index.html, 1920×1080 (16:9) stage, designed for 60fps.
- window.seek(t), t in seconds, computes every visual from t: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames (anything cumulative is solved analytically from t or re-simulated from 0 at a fixed step), randomness only from a seeded PRNG.
- No ?render in the URL: drive seek from requestAnimationFrame. With ?render: don't start that loop. Define seek once fonts and assets load.
- Google Fonts via <link> are fine.
- three.js as an ES module from a CDN, version pinned (import map: `three` and `three/addons/` to three@0.160.0 on jsDelivr). WebGLRenderer with preserveDrawingBuffer: true; render once per seek call.
</build>

<check>
Before showing me, screenshot one frame per second (t = 0…10) and look at each. Fix overlaps, clipped or cramped text, and anything that reads as a cheap demo. Look for faceting or holes, flat grey patches where reflections are missing, and blobs crowding the frame edge or the type. Confirm the final frame holds as a composed end card.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…