3D Metallic Liquid Drop Generator

How to dial chrome versus jelly

Follow these checkpoints when aligning renders with brand guidelines.

1. 1

   Start from a metal or glass preset

   Mercury and chrome presets lean on metalness; sapphire and emerald lean on transmission. Every preset is a starting point for brand hex adjustments.

2. 2

   Stack clearcoat over base roughness

   Lower base roughness tightens environment highlights; clearcoat adds a second glossy shell that reads like a fresh meniscus on a droplet.

3. 3

   Tune IOR and thickness for gel

   Index of refraction controls how much the city HDR refracts through the volume. Thickness pairs with transmission to sell viscous oil or soft gel without caustic solvers.

4. 4

   Stage the HDR, freeze motion, export PNG

   Pick slate, white, dark, or a transparent checker backdrop and swap among ten HDR maps for reflections. Freeze pulse and spin for pixel-perfect stills, auto-spin the orbit camera for B-roll, copy a bookmarkable URL, then download solid or transparent PNG — supersampling can approach a 3840 px long edge.

Where liquid-metal renders outperform stock drops

Stylized droplets keep campaigns on-message when literal water photography conflicts with product claims:

• SaaS & fintech hero art

  Abstract droplets imply liquidity, data flow, or precision without literal stock water photography.

• Skincare and lab marketing

  Gel transmission reads clinical and premium when paired with concise copy about formulas.

• Gaming UI splashes

  Metallic spheres communicate collectible rarity tiers without embedding licensed character IP.

• Deck transitions

  Still PNG plates composite cleanly under titles when projection rigs disallow autoplay loops.

PNG export fidelity and supersampling

Like other Abstract Engine tools, capture reads from the WebGL drawing buffer after an explicit render pass. When the preview panel is smaller than print-ready dimensions, the exporter can upscale toward a 3840 px long edge while restoring your viewport afterward — helpful for retina heroes sourced from compact split layouts. Transparent PNG clears the canvas alpha so compositing over video or slides stays clean; toggle the contact shadow if you need a floating bead with no grounding patch.

Accessibility and vestibular comfort

Pulse and spin sliders animate subtle motion. Lower pulse speed and amount for decks reviewed under WCAG motion-reduction expectations, or capture PNG exports from near-static phases when stakeholders prefer minimal animation cues.

Craft tips for convincing droplets

Small adjustments avoid accidental plastic looks:

• Match the slate backdrop hex (#f8fafc) when layering PNGs onto identical web backgrounds — or use transparent export and drop the PNG on any surface.
• If reflections feel noisy, orbit until skyline bands align instead of cranking metalness past 0.98.
• High transmission plus thick meshes increases GPU cost — drop geometry detail on laptops before recording motion captures.
• Pause mentally on the pulse phase you prefer before exporting marketing stills.

Privacy-first WebGL shading

PBR parameters compile and execute entirely in your browser — useful when creative teams review proprietary palette directions from client networks that block third-party rendering farms.

Frequently asked questions