The field follows your cursor over the canvas: X slides the tall part, Y sets how far it has risen. Audio drive layers the music on top of that — the bars take the spectrum, lows in the middle out to highs at the edges, and the blur tightens as it gets loud. Works with any input under Reactivity: an MP3, the microphone, tab audio or the generative music. At 0 the field is cursor-only.
Strata
Remove ASCII
Layers14
Ridge height46%
Roughness100%
Drift100%
Gradient waves
Shading depth75%
Audio drive100%
Layered ridges, each lit along its crest and drifting at its own rate so the stack shears rather than sliding. Gradient waves fills each wave with a ramp between two of your palette colours instead of its own shadow. Audio drive maps the spectrum across the stack: bass swells the big foreground hills, the high end ripples the distant ones, and a kick lifts everything for an instant. Colours come from your Foreground and Background.
Ticker
Remove ASCII
Rows18
Cuts per row6
Width72%
Striped blocks45%
Gutter0px
Audio drive100%
Rows of colour tape, cut into blocks, some flat and some finely striped. Audio drive is structural here rather than cosmetic: the bass widens the rows towards the bottom, and the whole composition re-cuts on the beat once a tempo is locked. With no audio it re-cuts on a slow timer. Colours come from your Foreground and Background.
3D Overlay
Enable 3D Overlay
Auto-rotate X
Auto-rotate Y
Stop rotation
Holds the object still without losing your Auto-rotate settings, so turning it off resumes exactly where you were.
Transparent 3D Background
Light Azimuth45°
Light Elevation36°
Animation
Speed1.0×
Scale1.0
Complexity3
Font Size14px
Reverse direction
Character Set
Emoji
Image
Fills every character cell with this image instead of a glyph. For an image you can position and drag, use Place image on canvas; for one behind everything, use Background under Colour.
Image Scale1.0×
Generative BG BETA
Enable
Restyles the current animation frame with a style prompt and shows it as a foreground layer (dial it back with Result opacity). Needs the server proxy (FAL_KEY) configured.
Strength0.65
Steps6
Result opacity1.00
Live streaming only. Strength and Steps above apply to a single Generate frame; these apply to the socket.
Frame carry-over1.000
1.000 starts each frame from pure noise, so frames are independent. Lower carries the previous frame's latent forward — that is what makes the output read as one continuous stream rather than a slideshow.
Live steps3
Interpolate frames
Color Palettes
Foreground
Gradient
Background
In the cells
Gradient
Transparent
Behind everything
Shows through transparent areas: a transparent cell background, a transparent 3D backdrop, and the shape overlay's negative space. An image wins where one is loaded; the colour is what you get everywhere else.
Options
Invert density
Aspect correction
Color only
Shape overlay
Crop Frame
1:1 — Square
Audio Reactive
Sensitivity1.0×
Smoothing0.8
Bands
Kick is 60-120Hz, Snare is 2-6kHz, so they are the actual instrument ranges rather than thirds of the spectrum. Pick the one that lights up with the part you want to drive the visuals.
Modulate
Speed
Scale
Complexity
Font Size
Beat Sync
Listening for a beat…
Hard cuts on the beat
Snaps things to a new state ON the beat instead of easing towards it. The tempo is tracked and held by a flywheel, so cuts keep landing through a breakdown where the kick drops out. This is the one that makes a video export worth watching.
Cut every1 beat
Cut: 3D object
Cut: colour
Cut: shape
Cut amount70%
Subtitles
Show subtitles
Transcribes audio to display synced lyrics/words on the canvas.
Listening...
Vocal boost
Routes audio through a vocal-isolation filter (bandpass 200Hz–4kHz + compressor + mid-side extraction) before it plays through speakers. Helps the mic pick up cleaner vocals for Live transcription.
32px
Background
Position: Bottom
Generative Music
Soothing ambient soundscapes for focus and flow. Audio reactive.
Mood
Match time of day
Picks the mood from your local clock each time you press Play: brightest around dawn, clearest through the morning, warmer in the afternoon, reflective in the evening, deepest overnight. Choosing a mood yourself turns this off.
Breathe with the music
A slow swell to pace your breathing against. Six breaths a minute is the rate the research on resonance breathing settles on, with the exhale longer than the inhale. Whenever this music is what is driving the visuals, the animation breathes along with it.
Breathe in
Breaths per minute6.0
Breath depth0.30
Tape character0.50
Wow, flutter, hiss and a little saturation on the drone bed, for the warmth of slightly unsteady tape rather than a clean synth. Takes effect the next time the music starts.
Time
Organic timing
Notes arrive in gestures rather than one at a time on an even spread, and the character of the pacing shifts every minute or two. Pitch is unaffected: the harmony stays inside the same scale either way. Off gives the older, evenly random timing, which is worth an A/B.
Time: drifting
Modulation roughness0.50
How unsteady the filter movement and the tape wow are on their way to each new value. At 0 they glide cleanly; higher is more hand-made. Takes effect the next time the music starts.
Granular texture0.15
Short windowed fragments of the mix, scattered back into the reverb at irregular delays. A texture rather than an echo. Takes effect the next time the music starts.
Breathing session
Countdown5s
Volume-20dB
Reverb0.8
Density1.0×
Feed to audio reactive
Face Tracking
Use your camera to shape the animation to your mouth movement. Works with audio reactive.
Influence1.0×
Spread1.5×
Show preview
Webcam
Your camera feed drives the kinetic pattern. Characters, shapes, and colors respond to what the camera sees.
Reactive Mode
Only shows where movement is detected — still areas stay empty.
Threshold15
Trail60
Mirror
Shape Overlay
Add geometric or organic shapes as visual overlays on the pattern.
Size100%
Position XCenter
Position YCenter
Invert (animation inside shape)
The colour behind everything, including outside the shape. Turn on Cell Background's Transparent toggle for a transparent surround, or upload an image to fill it instead.
Logo Animation
Remove ASCII
Logo shape
No custom logo
Logo size60%
The shape is the logo the animation runs on. Pick media to use whatever you uploaded in Add Media. Turn Remove ASCII off to let the animation drive character density instead. Audio drive makes the reflection sweep and glow with the music: start audio under Reactivity. Every shader's ramp is editable under Colours, or switch on Use ASCII colours to take it from your Foreground and Background instead.
Stop Motion
No sheet yet
Draws your description ONCE, then redraws that same drawing for every frame with a different hand each time. The wobble between frames is the animation, the way a hand-drawn flipbook boils. Every frame comes from the original rather than from the one before it, so the sequence never drifts and the loop has no seam. The pencil-and-paper look is in the prompt, so your description only has to say what to draw. Pause and the MP4 and GIF exports work on it like any other template.
Frames20
Redraw strength0.28
How far each redraw is allowed to move from the original. Too low and every frame is identical so nothing boils; too high and each frame is a different picture and the loop falls apart. The range is clamped to the band where it still reads as one drawing.
Frame rate10 fps
Imperfection35%
How much frame-to-frame movement to keep. At 100 nothing is corrected and it boils like a hand-drawn flipbook. Turning it down centres each frame on the first, which removes the wobble — but it cannot tell wobble from the animation, so it flattens the movement you actually wanted too: at 0 the loop sits almost dead still. Measured on a test sheet, a subject that travelled 47px across the sequence travelled 0.8px at 0 and 16px at the default. Low numbers are for sheets where the subject should stay put.
Edge trim6%
Crops each frame inwards. This is what keeps page corners, gutters and registration marks out of the loop, so raise it if you can see paper edges. It applies to imported sheets; generated frames have no page to trim.
Import columns5
Import rows4
Ping-pong
Plays the frames forward then backward. A cheap way to make a sequence that does not quite meet its own start loop seamlessly anyway.
Remove ASCII
On by default, because the point of this one is the drawing. Turn it off and the frames drive the character density instead, so your charset, colours and gradients apply to the loop.
Media
No media loaded
Remove ASCII
By default the media drives the character density, so your charset, colours and gradients apply. Turn this on to drop the ASCII entirely and show the media as-is; the shape mask, crop and effects still apply either way. Video and GIF play on a loop, muted so they can autoplay.
Layer Order
Drag to reorder. Top of the list is front of the canvas. Effects and Shape are locked because the mask is a knockout: anything drawn after it would tear its negative space, so they hold their place while everything else moves around them. A layer dragged below Effects gets effected and masked; the same layer above them does not.
Party
Disco ball
Drops a mirror ball over the canvas and throws light around it. ⌘D toggles it from anywhere. It sits over the canvas rather than in it, so it is not in exports.
Webcam reflection
Mirrors your camera in the ball's tiles. Off, the tiles reflect the canvas instead, so there is always something real in them. Asks for camera permission the first time.
React to audio
The light brightens and the ball speeds up with whatever is driving the animation, so it works with an MP3, the microphone or the generative music.
Drawing
Draw on canvas
Puts a pen in your hand and a toolbar at the bottom of the canvas. The strokes are tldraw's, so they have real pressure and taper. ⌘⇧D toggles it. The drawing IS in exports: it sits in the layer stack like any other layer, so you can drag it above or below the effects and the shape mask. The tools load the first time you turn this on.
Keep drawing while off
On, turning the layer off puts the pen away but leaves the drawing on the canvas and in exports. Off, the drawing goes away with the toolbar.
Drawing opacity100%
Placed Images
None placed
Drops onto the canvas as a free-floating image you can drag to move and resize from the corners. Dragging a file straight onto the canvas does the same thing. This is not the same as Character Set → Image, which fills every character cell, or Background, which sits behind everything.
Effects
Enable
Post-processes the whole canvas, after the animation and every layer. Included in PNG, video and GIF exports; the SVG export stays vector and is unaffected.
Presets
Sound on export
100%
Drop SVG, PNG, GLB, or OBJ here
1:1
Format
Frame Rate
Resolution
Compression
Aspect Ratio
Duration
● Recording...
Aspect Ratio
0 fps
DOTCLOUD Forever
Pay once. Own it forever. No subscription, ever.
£39founding price · £59 after
4K video export, 8K when it lands
60fps export
Every future template and feature, included
Your name on the founding wall, first 50 only
Forever opens soon. Leave your email and the founding price is locked for you on day one.
Feedback
What is working? What is missing? What should DOTCLOUD do next?
Settings
Global to the app, not saved with a preset or shared with a guest. Keys are held for this session only and cleared when you reload.
Figma colours
Pull a palette straight out of a Figma file's colour styles. The token is used once, for that request, and is never stored.
OpenAI
For features that call OpenAI directly from your browser. Nothing in the app uses this yet; it is here so the key is in place when they land.
Replicate
Same again for Replicate. The generative background runs through the server-side fal proxy and does not use this.
This is my own device
Keeps your own browsing out of the analytics, so testing does not move the numbers. The setting is stored in THIS browser for THIS domain, so set it once in each browser you use, and again if the address changes.
Exclude me from analytics
User Guide
🚀 Getting Started
DOTCLOUD Kinetic generates real-time kinetic patterns from ASCII characters and emoji. Choose a template, pick a character set, adjust the controls, and export.
◈ Templates
Select a kinetic template from the dropdown at the top of the panel. Each one previews as a live thumbnail rendered with your current colours, so the list shows what you would actually get.
Use Speed to control how fast the pattern animates
Use Scale to zoom the pattern in/out
Use Complexity to add detail layers
Use Font Size to change character density
Some templates draw their own picture rather than a character grid: the Dia gradients (Ocean, Sunset, Aurora, Candy, Ember, Mono, 3D Fold), the shader templates, Stop Motion and Add Media. Each has a Remove ASCII switch. Leave it on for the picture itself; turn it off and the picture drives character density instead, so the glyphs take its shape.
The Dia gradients follow your cursor and the music. Moving over the canvas slides the tall part of the field and sets how far it has risen. Their own section, directly under Template, holds the rest: Bars, Blur, Peak height, Valley, Fold angle, and Audio drive. With audio running the bars take the spectrum, lows in the middle out to highs at the edges, and the blur tightens as it gets loud. Set Audio drive to 0 for cursor only.
🔤 Character Sets (ASCII)
This section only applies while ASCII is being drawn. On a source with Remove ASCII switched on there is no character pass to style, so the whole section hides itself rather than offering controls that do nothing. Turn Remove ASCII off and it comes back.
Choose from preset character sets or type your own:
Density — Classic ASCII art: .:-=+*#%@
Blocks — Unicode block characters: ░▒▓█
Dots — Circular density: ·•●◉◎
Braille — Braille patterns for ultra-fine detail
Binary — Just 0s and 1s
😀 Emoji Presets
Switch to emoji mode with 35+ curated presets organized by category:
You can also open the emoji picker to build your own custom set from any emoji.
🎨 Colors
Palettes — Click any preset palette pill to apply
Foreground — Click the colour swatch or type a hex value
Gradients — Toggle on to blend between two colours across the pattern
The Background section covers both meanings of the word, in two halves:
In the cells — the colour painted into each character cell, with its own gradient and a Transparent toggle for PNG/SVG exports with no background
Behind everything — an uploaded image, or a colour. This is what shows through every transparent area: a transparent cell background, a transparent 3D backdrop and the shape overlay's negative space. An image wins where one is loaded, and the colour is what you get everywhere else
⚙️ Settings, and Figma colours
The gear beside Search settings opens Settings: things that belong to you rather than to the piece you are making. Nothing in here is saved with a preset or shared with a guest, and keys are held for the session only and cleared when you reload.
Figma colours pull a palette straight out of a Figma file:
Bands, Beat Sync and Subtitles start collapsed. Click a heading to open it. Bands shows six named instrument ranges (Kick is 60-120Hz, Snare is 2-6kHz) so you can see which one is firing before deciding what it should drive.
Beat Sync is the half that CUTS rather than follows: on each locked beat something snaps to a new state and holds it. Cut: colour jumps your palette's hue by an interval of the colour wheel, Cut: shape swaps the shape overlay for another silhouette, and Cut: 3D object throws the model to a new angle. Cut amount sets how far a cut is allowed to go, and for shapes it is the chance a given cut moves at all.
Modulation targets (toggle on/off):
Speed — Bass frequencies speed up the animation
Scale — Mid frequencies zoom the pattern
Complexity — Treble adds detail layers
Font Size — Overall volume changes character size
Party lives here too: the disco ball drops over the canvas and throws light around it, brightening and speeding up with whatever is driving the animation. ⌘D toggles it from anywhere. It sits over the canvas rather than in it, so it is not in exports.
Tip: If audio doesn't play after uploading, click the Play button — browsers require a user interaction to start audio.
💬 Subtitles
Display synced lyrics or transcribed words over the canvas in real-time.
Enable Show subtitles in the Audio Reactive section
Transcribe — Uses OpenAI Whisper API (requires API key) to auto-transcribe your uploaded MP3 with word-level timing
Upload SRT — Load an existing .srt or .vtt subtitle file
Words appear synced to audio playback with a karaoke-style highlight
Adjust Size, toggle Background pill, and set Position (top/bottom)
Your OpenAI key is saved in your browser (never sent anywhere except OpenAI)
✏️ Audio Zones
Draw specific regions that react to different audio frequency bands independently — a feature unique to DOTCLOUD.
Click Zone in the toolbar (or Draw Zone in the sidebar)
Click on the canvas to place points (pen tool style)
Click near the first point to close the shape
After closing, you stay in draw mode — draw more zones without stopping
Press Esc to exit draw mode
Click a zone to select it (solid outline + corner handles)
Drag a zone to reposition it anywhere on the canvas
Press Delete or Backspace to remove the selected zone
Multiple zones can share the same frequency band
Frequency bands per zone:
Bass — Kick drums, low-end rumble (red energy)
Mid — Vocals, guitars, melody (warm pulse)
Treble — Hi-hats, cymbals, brightness (sparkle)
Level — Overall volume (full spectrum)
Presets: Center ellipse, Horizontal Bands, Vertical Bands, Radial rings, Quadrants — each auto-assigns frequency bands.
Invert zones: Toggle to make everything outside the zones reactive instead.
📦 Export
Frame → PNG — Export current frame as a raster image
Frame → SVG — Export as scalable vector graphic
Export Video — Record an MP4/WebM of the live animation. Press Esc or click Cancel to abort a recording.
Copy — Copy the raw ASCII/emoji text to clipboard
Aspect ratio — Set custom width × height before export
Transparent BG — Enable for exports without background
🖼️ Image Overlay
Three different things can put an image on the canvas. They are not
interchangeable, and only one of them is draggable:
Layers → Image — the image replaces
every character cell. Density controls its visibility and
Image Scale resizes it per cell. Not a placed object,
so there is nothing to drag, and like everything else that belongs to
the character pass it hides while Remove ASCII is on.
Layers → Place image on canvas, or dragging a file
straight onto the canvas — adds a free-floating image you
drag to move and resize from its corners. This is the
one you want for putting a logo or a graphic somewhere specific.
Colour → Background — an image or a colour that sits
behind everything and shows through transparent areas. Fixed in place.
💾 Presets
Save Current — Save all your settings (template, colors, characters, speed, etc.)
Load — Restore a saved preset
Export/Import File — Share presets as .json files
⌨️ Keyboard Shortcuts
⌘Z — Undo. Thirty steps deep, and a whole slider drag counts as one
⇧⌘Z — Redo
⌘K — Search every setting by name
⌘D — Disco ball
Space — Pause / Play
F — Toggle Fullscreen
Esc — Exit fullscreen / close a dialog / cancel zone drawing / cancel video recording
Undo covers every setting in the panel, including the ones that live behind a template's own section. Typing in a text field keeps your browser's normal text undo.