Tools - Studio Rotto

Desktop
iPad

Desktop
iPad

Rotto Diffuso is an experimental typographic generator that turns text into living matter. Inspired by Karl Sims’ incredible work on reaction-diffusion (the Gray-Scott model), this web tool lets you “cultivate” words as if they were biological organisms, generating complex organic textures that evolve in real time.

Originally created for the visual identity of the Bari International Gender Festival 2025, Rotto Diffuso offers full control over chemistry, flows, and lighting, allowing you to explore the boundary between typography and natural chaos, and export your results in high definition.

You can use Rotto Diffuso freely for your personal or commercial projects.

Be sure to tag @studiorotto if you share something.

Smart Guide

1. Main Controls

Pause/Resume: Freezes or resumes the real-time simulation calculation.

Reset: Restores all parameters to factory defaults (including F/K and colors).

Clear: Wipes the entire canvas, removing all traces of reaction. The canvas becomes empty (black or transparent).

Regrow: Re-initializes the text “seed”. Useful if the reaction has died out or if text has changed and a fresh start is needed without resetting parameters.

2. Text Generator

Text Area: Field to input the text used as the reaction mask.

Choose Font: Opens the file system to load a local font.

Size (10 – 2000): Font size in points. High values fill more canvas space.

Line Height: Vertical spacing between lines.

Letter Spacing: Horizontal spacing between letters (supports negative values for overlaps).

Alignment Icons: Aligns text left, center, or right relative to the canvas center.

Text Influence (0.0 – 1.0):

High: The text acts as a constant feed source (remains legible).

Low: The text provides only the initial impulse and then dissolves into the reaction.

3. Colors & Style

Color Map Presets: Quick buttons to apply predefined color gradients.

Custom Gradient: Opens the editor to create custom gradients (add stops by clicking the bar, remove by dragging off).

Emboss (Checkbox): Activates normal map rendering to simulate 3D relief.

Invert (Checkbox): Inverts the value mapping (empty becomes full and vice versa).

Emboss Strength: Intensity of the relief effect (visible only if Emboss is active).

Blur: Applies a post-process Gaussian blur to soften edges.

Hue/Saturation/Brightness/Contrast: Global color correction on the final output.

Color Frequency: How many times the gradient repeats along the reaction density values (creates color rings).

Color Phase: Rotates the gradient colors (“color cycle” effect).

4. Export

Width / Height: Rendering resolution for export (independent of screen view).

Show Export Guide: Displays a dashed box on the canvas indicating the framing area.

Export PNG: Downloads a static image.

Transp. PNG: Downloads a static image with a transparent background (Alpha channel).

Sequence / Transp. Seq.: Starts frame-by-frame recording. Press “Stop & Save ZIP” to download.

5. F/K Presets & Rate (Chemical Parameters)

Preset Buttons: Pre-calibrated Feed and Kill rate configurations generating known stable patterns (e.g., Corals, Worms, Mitosis).

F/K Map (Red Reticle):

Y Axis (Up/Down): Feed Rate. Controls how much “food” is added. High = explosive/full reaction. Low = dying reaction.

X Axis (Right/Left): Kill Rate. Controls how fast reactant dies. Right = fast death (thin shapes). Left = slow death (bloated shapes).

6. Simulation Parameters

Speed: Number of calculation passes per rendered video frame. Increase to accelerate evolution.

Time Step: Time multiplier in the differential equation.

< 1.0: Slow and precise simulation.

> 1.0: Fast simulation but potentially unstable (artifacts).

7. Scale (Geometry)

Scale: Base dimension of the reaction grid.

0.01 – 0.1: Microscopic, sandy details.

1.0 – 5.0: Macroscopic, liquid details.

Radial Scale: Modifies scale based on distance from the center (e.g., denser at center, sparser at edges).

Random Scale: Introduces scale variations based on white noise.

Ring Scale: Introduces scale variations based on concentric rings.

8. Flow (Flow Vectors)

These sliders apply physical forces that move matter while it reacts.

Vertical Flow: Pushes reaction up or down (drip effect).

Radial Flow: Expands (explosion) or contracts (implosion) matter.

Rotation Flow: Rotates the entire simulation around the center.

Swirl Flow: Creates a spiral twist.

Rotto Diffuso, 2025

Open

Desktop
iPad
Smartphone

Desktop
iPad
Smartphone

Open Tool

Not My Typo is a web-based kinetic typography tool that lets you write, animate and distort type in real time. Upload your own fonts, shape the composition through modular effects, gradients and feedback-based transformations, and generate outputs ranging from clean motion to unstable, organic and glitch-driven typographic forms.

You can use Not My Typo freely for your personal or commercial projects.

Be sure to tag @studiorotto if you share something.

Smart Guide

Core Controls

Text: Type freely on multiple lines and define the base composition.

Font Upload: Load custom fonts and instantly test them inside the engine.

Alignment: Set the text left, center or right.

Size / Leading / Spacing: Control scale, line height and letter spacing to define rhythm and density.

Fill / Stroke: Switch fill on or off, choose fill and stroke colors, adjust stroke weight, and toggle between sharp or rounded corners.

Background

Solid Color: Use a flat color background.

Gradient Layers: Build layered linear or radial gradients, add and move color stops, animate them, invert them, and combine them through blend modes.

Image Background: Upload an image and use it as the base layer of the composition.

Effects Stack

Effects can be added, removed, reordered, collapsed or temporarily disabled.
Their order matters: each combination can produce a radically different result.

Animator: Applies motion behaviours to the type, including bounce, pulse, jelly, wiggle, wave, elastic, spin, glitch and other kinetic variations.

Spikes: Adds a jagged, sharp zig-zag distortion to the letterforms.

Metaball: Blurs and fuses characters into a soft, liquid mass.

Displacement: Distorts the typography through procedural maps such as noise, glass, chaos, liquid, stripes and digital patterns.

Halftone: Turns the rendered text into a dot or square grid structure.

Feedback: Creates recursive visual trails through zoom, decay, rotation, blur and positional shift.

Glow: Adds luminous halos with adjustable blur, spread, opacity, color and blend mode.

Offset: Generates multiple shifted copies of the text across the X, Y or XY axis.

Wave: Applies a global wave-like deformation to the image.

Offset Path: Creates an expanded contour around the typography, with options for merged paths and hole filling.

Track: Draws a graphic outline or trail around the text, with solid, dashed or dotted styles, optional animation, and placement above or behind the main type.

Drop Shadow: Adds a controllable shadow layer with blur, offset, color, opacity and blend mode.

Extra Functions

Randomize: Generates unexpected visual setups by reshuffling colors, gradients and effects.

Rotto Diffuso, 2025

Not My Typo v1.0, 2026