Does the effect require a 3D model or WebGL scene?

No. The guide builds the effect with SVG filters, HTML/CSS and GSAP: blur/alpha treatment merges beads, while seeded turbulence and displacement distort the mark. Small edge offsets add a glass fringe. Rendering is local and does not require a generation API or per-frame model fee.

How distorted should the mark be?

Enough that a viewer cannot read it in the frame immediately before rupture, while still perceiving a shape inside the bead. Compare that frame with the clear lockup afterward. Treat it as a legibility review, not merely a preference for attractive distortion; the reveal needs something left to reveal.

Can I change the timing?

Yes, but retain the documented constraints: at least ten still frames before rupture, collapse no longer than 0.2 seconds and scatter at least three times that collapse duration. Moving the rupture changes the surrounding beat plan, so repeat those checks.

Is a finished project included?

The download contains the production guide and liquid, timing and retarget references. An agent follows them to create the HyperFrames project and render your branded MP4. It is not a ready-made film with an upload-logo button.

What should remain on the final frame?

The lockup should be the clearest and stillest object. The guide avoids ongoing wobble or a second liquid event after rupture because either weakens the resolution the film was built to deliver.

Liquid-Rupture Logo Reveal

Previews from the publisher

Let a recognizable mark resolve at one decisive moment. Liquid-Rupture Logo Reveal places your vector artwork inside a distorted liquid bead, holds it just beyond readability, then breaks the bead to leave a crisp lockup. The reveal depends on that before-and-after contrast, making it a short ending rather than a space for product explanation.

What you get

A documented production workflow for a six-to-eight-second logo sting, targeting a 1920×1080, 30 fps H.264/AAC MP4 by default, or an agreed canvas. The result should progress through gathering, drift, stillness, rupture, scatter and a clean final hold.
Guidance for creating an editable HyperFrames project from HTML, CSS, SVG filters and GSAP, with filter definitions, authored satellite trajectories and metadata. No 3D scene, environment map or generation-model job is part of the method.
A liquid-craft reference covering blur/alpha merging, seeded turbulence and displacement for the carried mark, a restrained glass fringe and three slow abstract color fields.
A beat plan, brand-retarget checklist and legibility test comparing the frame just before rupture with the resolved mark afterward. The package supplies these instructions and references; the branded project and MP4 are outputs to be made, not finished files already included.

Before you choose

Choose this for a mark with enough identity to reward a reveal. Test the actual artwork before polishing the background: an unreadable-before, unmistakable-after pair is more useful evidence than a beautiful liquid simulation. If the brand must explain itself in words first, another structure will do that work better.

Good fit

An outro, advertisement ending, screen loop or standalone brand sting that needs a brief, memorable mark reveal.
A brand with real vector artwork and a distinctive silhouette that remains visually interesting while distorted.
A creator prepared to build and verify a local motion project from the supplied method instead of expecting a pre-rendered logo template.

Not for

Introducing or explaining a product. Copy before the rupture competes with the mark and undermines this structure.
An identity that is only ordinary text in a system font and has no recognizable silhouette to carry through the distortion.
A run without genuine logo artwork or authority to use it. The workflow calls for the caller’s own or explicitly permitted mark rather than a mark invented from a verbal description.

How to use

You say/hyperframes-liquid-logo-reveal Make a 7 second liquid logo reveal to close our brand film. SVG mark attached.

Prepare the real vector mark, optional wordmark, ground color and three abstract field colors. Decide whether the sting is an ending or standalone. Check the artwork’s actual path bounds so an off-center viewBox does not crop or misplace it.
Prepare the documented HyperFrames environment with Node.js 22 or newer and FFmpeg, including the motion-stack guidance named by the package. These additional stack references are not bundled as an executable project in this download.
Place the rupture frame first and plan the sequence around it. Keep a still hold of at least ten frames before collapse, collapse at or below one fifth of a second and scatter at least three times as long as collapse.
Build the merging beads, refracted mark and authored scatter. Seed turbulence and fix satellite trajectories so arbitrary-frame rendering does not rearrange the image. Size the bead around the actual mark and keep the background abstract rather than substituting photographs.
Snapshot the last frame before rupture and try to identify the mark, then compare it with the clear result. Increase distortion if it reads too early; remove residual liquid motion after the reveal. Run the documented lint/check and output checks, preview at speed, render and verify the final canvas, duration, frame rate and any supplied audio.

Requirements and costs

You bring: The mark as a real vector file, and the wordmark if there is one — both owned by the caller · Four colours: a ground and three abstract field colours · The canvas, and whether the sting is an outro or standalone · Optionally a licensed music bed and a rupture sound
Dependencies: HyperFrames CLI — required · Node.js 22 or newer — required · FFmpeg — required
Outside costs: Not collected yet
Tools used: HyperFrames
Publisher testing: v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT