Effects for Three.js & React Three Fiber

Effects are animated visuals you place in a scene: an aura behind a product, lightning around a logo, a black hole, a galaxy, smoke rising from a chimney, fog rolling across a floor. Each effect is an object of its own that you position and scale, so it can sit behind, around or in front of anything else in the scene.

What's in the family

• Energy and magic: Aura, Orb, Forcefield, Harmonic Shell, Glyphs, Sparkles Burst and Flares.
• Electricity: Lightning bolts, and Lichtenberg, a glowing fern of electricity that creeps over a surface, fades and grows again.
• Space: Black Hole, with light bent around it and a glowing disk, Galaxy, Planetary Rings, Portal and Constellation.
• Science and tech: DNA Helix, Molecules, Neural Network, Data Stream, Field Lines, Strange Attractor and Hologram.
• Nature and elements: Fire, Smoke Plume, Smoke Ring, Smoke Ribbon, Volumetric Fog, Water Caustics, Ice Crystals, Ice Halo, Aurora, Falling Leaves, Dandelion Seeds, Firefly Swarm, Murmuration, Bubbles and Shockwave.

Why they move convincingly

Many effects are built on the real physics of the thing they show. Falling leaves flutter, glide and tumble the way real leaves do. Fireflies start blinking at random and slowly fall into sync, with ripples of light rolling through the swarm. Smoke rings slow down as they grow and pairs pass through each other. The starling Murmuration folds into dense, wave-like sheets. Water Caustics bends sunlight through a rippling surface into the bright web you see on the floor of a pool. You don't need to know any of this to use them; it is why they don't look like a loop.

Settings

Most effects start with the same four controls: Intensity for brightness, Speed, Opacity and Color. After those come the effect's own: Ring Count and Thickness on the Shockwave, Star Count and Arm Twist on the Galaxy, Bolt Count and Branch Depth on Lightning. Every effect's settings can be keyframed, edited live and tied to the cursor's movement, so a forcefield can brighten or an aura can shift colour as the visitor moves the mouse.

Choosing an effect

• Behind a product or logo: Aura, Orb, Forcefield, Flares.
• Launches and reveals: Shockwave, Sparkles Burst, Lightning.
• Space and sci-fi: Black Hole, Galaxy, Portal, Planetary Rings.
• AI, data and science brands: Neural Network, Data Stream, DNA Helix, Molecules.
• Calm natural scenes: Falling Leaves, Dandelion Seeds, Firefly Swarm, Volumetric Fog.
• Heat and atmosphere: Fire, Smoke Plume, Water Caustics.

Effects pair well with materials of the same theme: a lava sphere inside Fire, a chrome logo inside Lightning, a glass orb inside an Aura.