3D Dissolve

A cinematic 3D dissolve effect with glowing rings, particle dust, and GPGPU vapor. Works with any GLTF model.

3D Dissolve

A cinematic 3D dissolve effect with glowing rings, particle dust, and GPGPU vapor. Point it at any GLTF model — the dissolve adapts to mesh geometry automatically.

vfx 3d particles dissolve

Install

Terminal

npx hyperframes add three-dissolve

Details

Property	Value
Type	Block
Dimensions	1920 x 1080
Duration	8s

Variables

Variable	Type	Default	Description
modelUrl	string	CDN spellbook	URL to a GLTF model. Any .gltf or .glb with textures works.
dissolveStart	number	0.8	Time (s) when the dissolve begins.
dissolveEnd	number	7.1	Time (s) when the dissolve completes.
particleColor	color	#1a7aff	Base color for dissolve particles.
bgColor	color	#05070d	Scene background color.

Files

File	Target	Type
three-dissolve.html	compositions/three-dissolve.html	hyperframes:composition

Swapping the Model

Replace modelUrl with any GLTF model URL. The dissolve effect samples the mesh surface for particle emission, so it adapts to any geometry:

<div
  data-composition-id="three-dissolve"
  data-composition-src="compositions/three-dissolve.html"
  data-start="0"
  data-duration="8"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
  data-variable-values='{"modelUrl":"https://example.com/my-model.gltf","particleColor":"#ff4400"}'
></div>

If using a local model, place it alongside the composition and use a relative path:

data-variable-values='{"modelUrl":"./my-model.gltf"}'

Usage

After installing, add the block to your host composition:

<div
  data-composition-id="three-dissolve"
  data-composition-src="compositions/three-dissolve.html"
  data-start="0"
  data-duration="8"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>