Light from everywhere. Sets the floor, so nothing goes pitch black.
3D AND
SHADERS!
Swing a camera round a phone. Wire a plasma through a kaleidoscope. Write twelve lines of WGSL and make the bass light it up. All of it on the same timeline, all of it keyable, all of it exporting exactly as it plays.
A launch post in Animate with the Design panel open. R picks the rectangle tool and a rectangle is dragged out across the post. Its fill opens from the Design panel; Shader is picked, then Kaleidoscope under Audio visualizers, and the rectangle fills with a turning kaleidoscope. Space plays it: a shader graph that reads time moves on its own.
ZAP!
WHY BOTHER
Flat is fine. Depth is better.
Most design tools give you a canvas with an X and a Y and call it a day. Then someone wants the product shot to turn, the app screens to fan out, the background to breathe, and you are off to a 3D app and a shader toy and a compositor.
We put the depth and the pixels in the editor. A group can become a 3D scene with a camera and lights. Any fill can be a live GPU shader. Every number in both is a property you can key, give a behaviour, or hand to the music. And because PopCraft draws everything on the GPU anyway, this is not a special preview mode: it is just how the canvas works.
4
kinds of light, plus materials
15
3D motion templates
39
graph nodes in seven groups
6
music visualizers
CAMERA
A real camera, in a real scene
Turn a group or frame into a 3D scene and its layers become cards in space. The camera has a lens in millimetres (50 by default; the field of view shows beside it), a position for truck, pedestal and dolly, an orbit round the point of interest, and tilt, pan and roll.
The Phone orbit template is all of this at once: a phone built from flat cards, its screens and its back, with the camera swinging round it. No skew tricks. Perspective.
The Phone orbit template in Animate, zoomed on its frame. Space plays it: a phone built from flat cards in a 3D scene turns in perspective while the camera moves around it, its screens and back seen from each side.
DEPTH
Tilt, turn and pull things forward
Select a layer inside a scene and its 3D layer section has X° (tilt about its horizontal axis), Y° (turn about its vertical axis) and Z (depth toward you). Rotation is still the turn in the picture plane, and the anchor is the pivot for all three.
Key Z on each card of an app screen and it explodes into layers. That is the Exploded UI template. There are fifteen 3D motion templates in all: a coverflow, a laptop reveal, a pricing fan, a product turntable, a screen wall, an extruded logo, a parallax cascade and more.
The Exploded UI template in Animate, zoomed on its frame. Space plays it: an app screen tilts back in 3D and its cards lift apart to different depths, then settle together again.
PRESETS
Camera moves in one click
Click + on a 3D scene and the Camera tab has Truck, Crane, Pan and Orbit. Push in, Pull out, Dolly, Drift and Zoom through work on any group, 3D or not. Each writes ordinary keys on the camera that you can then reshape on the timeline.
A 3D title card in Animate. The title scene group is a 3D scene with a camera and lights. With it selected, + in the timeline opens the presets; on the Camera tab, Orbit swings the camera around the card. Space plays the move: the card turns in perspective as the camera circles it.
The Burger reveal template in present mode. The burger is a 3D scene built from motion components. The pointer moves over the layers and each lifts as it is hovered; a drag across the burger orbits it in 3D.
LIGHTS
Light it like you mean it
DIRECTIONAL
SUN!Parallel rays from a position toward a target. The sun, basically.
POINT
BULB!Light from one spot in X, Y and Z, spreading every way.
SPOT
STAGE!A cone with an angle and a soft edge, aimed at a target.
Each layer has a material: Takes lights on or off, then how much ambient, diffuse and specular light it shows, and a Shine from 1 to 512 for how tight the highlight is. Hide light flips a light off so you can compare. Every light, material and camera field is keyable, so a spotlight can sweep across a title.
SHADER FILLS
Any fill can be a live shader
Open a fill, choose Shader, pick a preset. Each tile plays a short loop of itself so you know what you are getting. A shader that reads time moves in Animate, in Present and in exports, on the timeline’s clock, so a given frame always renders the same.
The Backgrounds are Mesh gradient, Plasma, Waves, Starfield and Grid glow. Their params sit under the fill with a ◆ each: key Mesh speed from 0.3 to 2 over the last second and the background surges into the end card.
The Shader title card template in Animate, zoomed on its frame. Space plays it: a mesh-gradient shader moves behind the title on the timeline’s clock while the title and its episode tag come in.
EFFECTS
Particles, speed lines and light rays
The effect presets draw with transparency, so they sit on a layer over your picture. Put them on Screen for light, sparkles and rain. Every knob is keyable and every frame renders the same.
PARTICLES
FWOOSH!Petals, rain, snow, sparkles, confetti, embers and dust motes, in layers of depth, with density, speed, angle, sway, size and spin.
MANGA LINES
ZOOM!Focus lines rushing toward a centre and speed lines along an angle. Key their amount up as a charge builds.
HITS AND LIGHT
KRAK!Impact burst, driven by a progress you key on the hit, and light rays fanning from an origin, even one off the frame.
NODES
The shader graph: wires instead of code
Every built-in preset is a shader graph: nodes wired together that PopCraft compiles into an ordinary shader fill. Click Edit nodes and the node editor opens under the canvas, the way the timeline does. Each node shows a live preview of the graph up to that point, so you can see what every step adds.
EVERY INPUT IS A KNOB
An input no wire feeds becomes a knob in the Design panel, named node_input. Changing one re-renders without recompiling, so dragging, keying or driving it from the music is cheap.
WARPS BEND THE WORLD
Zoom & rotate, Kaleidoscope, Tunnel, Liquid warp and Mirror ask the nodes upstream at a moved position. That is how one warp bends everything before it.
FEEDBACK, NO CHEATING
The Feedback node gives MilkDrop-style trails by reading its input many times, each echo zoomed and turned a step further and a little earlier. Every frame still depends only on its time.
A launch post whose frame has the Plasma shader fill, its fill open. Build with nodes (the + beside Edit nodes) opens the node editor under the canvas with only the Output node. A double-click on empty space opens the node search and Plasma is added; a wire from its output into the Output's colour makes the frame draw it. The Output is dragged to the right, and a wire dropped from Plasma onto empty space adds a Colour ramp already wired; wiring the ramp into the Output replaces the old wire and the frame turns purple. Selecting Plasma shows its knobs on the right, and its scale is typed. Shift+A adds Noise, which is dragged under Plasma; a marquee selects both, Cmd+D duplicates them with their knob values and Delete removes the copies. A wire is dragged off the Output's input to disconnect it, another is disconnected from its right-click menu, and Cmd+Z brings both back. Scrolling pans, Cmd+scroll zooms, and F fits the graph.
The Synthwave tunnel visualizer in Animate with its Neon tunnel layer selected. The Design panel lists the graph’s knobs: every unwired input of its nodes. A knob’s value is typed and the tunnel changes at once, without recompiling; Space plays it with the music.
CODE
Or write WGSL by hand
Click Edit WGSL and write a fn shade(uv, res, time) that returns a colour. The fields of a struct Params become controls: @range sets a slider, @default its start, @color gives you a picker.
Mark a field @audio bass and it follows the music the moment you apply. While you type, a preview above the code draws your draft; the canvas waits until you press ⌘↵. A mistake is marked on its line and explained, and the preview keeps the last version that compiled.
Save keeps it under My shaders. Publish puts a pack of them on the marketplace, graphs included, so whoever installs a node shader can open its nodes.
Edit WGSL · ⌘↵ applies
1struct Params {2 speed: f32, // @range 0 4 @default 13 tint: vec3f, // @color4 level: f32, // @range 0 1 @audio bass5}67fn shade(uv: vec2f, res: vec2f, time: f32) -> vec4f {8 let r = length(uv - 0.5);9 let wave = sin(r * 24.0 - time * params.speed);10 let glow = 0.5 + 0.5 * wave + params.level;11 return vec4f(params.tint * glow, 1.0);12}
A launch post whose frame has the Plasma shader fill, with its fill open. Edit WGSL shows the code under a live preview. A number in the code is replaced with nope: the gutter marks its line and the list under the code says the value is unresolved, while the preview keeps the last version that compiled. Typing 1.5 instead clears the error and the preview draws tighter bands; Cmd+Enter applies it to the canvas.
Signed in, a launch post whose frame has a tweaked Plasma shader fill, its fill open. Save asks for a name; Neon plasma is typed and the shader joins My shaders. Publish opens Publish a shader pack with Neon plasma ticked beside its first frame. Cancel closes it, and the package button opens My shader packs: two published packs, each with its picture, item and install counts, a Listed switch, a link to its page and delete. Turning off the first pack's switch makes it unlisted.
TURN IT UP
Visualizers that follow the music
Six audio visualizers are graphs with an Audio node: Zoom feedback, Kaleidoscope, Plasma pulse, Synth tunnel, Starfield warp and Liquid ink. Drop a track on the timeline and they go. The Synthwave tunnel template glows with the bass and the beat while stars streak past.
The music drives anything, not just shaders. Put Audio: bass kick on a logo’s scale and it thumps. Audio: frequency band on a row of bars, low to high, and you have an equalizer. Beat flashon a colour and it flashes on every beat.
The Synthwave tunnel visualizer in Animate, zoomed on its frame. Space plays it with its music: a neon grid tunnel rushes toward the viewer with stars streaking past, glowing harder with the bass and the beat.
HOW IT LISTENS
Analysed ahead, so every frame agrees
When a clip lands on the timeline, PopCraft decodes it and works out its loudness, bass, mids, treble, a 32-band spectrum from 40 Hz to 16 kHz, onsets and beats, 100 times a second. Each frame reads that at the moment being played. Scrub, play, present or export: the same frame looks the same.
BASS · MIDS · TREBLE
20–250 Hz for kicks, 250 Hz–4 kHz for voices and snares, 4–16 kHz for hats and air.
BEAT · ONSET
The beat is the pulse a listener nods to. The onset is every hit, beat or not.
ATTACK · RELEASE
Rise fast, fall slow, like a real meter. Delay reads back in time for a scrolling waveform.
The Lo-fi loop visualizer in Animate, its background layer (Liquid ink) selected. In the Design panel its fill opens; under Audio visualizers Kaleidoscope is picked and the background becomes a turning kaleidoscope. Space plays the track: the pattern zooms with the mids and brightens with the level.
The Lo-fi loop visualizer, signed in. Assets lists the asset libraries; Use adds Audio reactive, and its motion components show. Spectrum bars is dragged onto the frame, and Space plays the track: the bars dance to the music.
FROM ZERO
Your first scene in six moves
- 1
Turn on 3D scene
Select a group or frame. In the Design panel’s 3D section, switch on 3D scene. Its layers can now tilt, turn and come forward. - 2
Place the cards
Select a layer inside and set X° (tilt), Y° (turn) and Z (depth). Key them like any other property. - 3
Move the camera
Click +, open the Camera tab, and pick Orbit, Truck, Crane or Pan. Or set the lens and position by hand. - 4
Light it
Add an ambient, directional, point or spot light. Give layers a material: ambient, diffuse, specular and shine. - 5
Fill it with a shader
Open any fill, choose Shader, pick a preset. Press Space: it moves on the timeline’s clock. - 6
Wire it to the music
Drop a track on the audio lanes. Visualizers and audio behaviours follow it, frame by frame, the same in every export.
THE OLD WAY
Four apps for one shot
| THE OLD WAY | IN POPCRAFT |
|---|---|
| Mock up in a design tool, rebuild in a 3D app | Switch on 3D scene. Same layers. |
| Find a shader on the internet, hope it ports | Pick a preset, open its nodes, rewire it |
| Keyframe a pulse to the kick by ear | Audio: bass kick, analysed from the file |
| Render passes, composite, render again | It exports as it plays, frame by frame |
OPEN A TEMPLATE
Spin something
Click New file, search 3D or visualizer, and press Space. Then take it apart. The 3D and shader graph docs cover every field. For the rest of the timeline, see the motion studio.
ASKED & ANSWERED
Questions, answered
Is it real 3D or a fake skew?
Real perspective. A 3D scene works the way CSS preserve-3d does: each layer is a flat card in space, seen through a camera with a lens from 1 to 1000 mm, and drawn back to front. To everything outside, the scene is still an ordinary layer.
Can I import 3D models?
No. Layers are flat cards placed in space, which is great for devices, UI, type and paper-cut scenes, but there are no meshes. Two cards that cross also do not cut through each other; they are sorted by depth.
Do I need to know shader code?
No. Every built-in preset is a node graph you can open and rewire, and every unwired input is a knob in the Design panel. If you do write code, Edit WGSL takes a shade(uv, res, time) function and turns your params into controls.
Do shaders export?
Yes, to video, GIF and PNG, exactly as they play, because every frame is a pure function of the time and its knobs. Lottie cannot carry shaders, blurs, glass, halftone or 3D layers, and the Lottie option says so and names the layer.
Is the audio-reactive part live input?
No, and that is on purpose. PopCraft analyses the audio file on the timeline ahead of time, 100 times a second, so a frame looks the same when you scrub, play, present and export. It does not listen to a microphone.
Does 3D survive web export?
The placement, the parts’ interactions and the orbiting drag do. The lights do not, so shade parts with their own colours if the page matters.
THE MANUAL, FOR THE DETAILS
ZAP! YOUR TURN.
Orbit a camera, wire a shader graph, drop in WGSL. Free to start, in your browser or on your Mac.