design
cabralorenzo, Ink Bloom interactive component
Post by Lorenzo Cabra (@cabralorenzo), 2026-10-24
What it is, and who made it
A UI card component: as cards are swiped, the next image appears through a spreading ink-like mask.
Parts, layer by layer
- UI: rounded card, arrows, soft grey surround (O).
- Reveal: an ink-edged mask grows from a point to fill the card (O).
- Measures: mean speed 0.021 widths per second, coherence 0.45, loop closure 1.07 (M); no spread exponent fitted, because each swipe resets the field.
- Fluid reading: diffusion, opacity; additive ink; processes bleed, diffusion, transformation.
The framework behind it
An image transition as a dye: the new image is the ink, the old one the water. The mask is a growing, noise-edged front.
The same idea in distant fields
- Ink drops in water (marbling).
- Burn-in and dissolve transitions in film.
- Infection spread on networks (a front with a noisy edge).
Dual edge
Beautiful transitions slow people down; keep them short and skippable, and off when reduced motion is set.
Measured
clip 1
- Dominant wavelength
- 0.0526
- Edge softness
- 5.39
Concepts
- advection
- air
- bleed
- city architecture
- diffusion
- erosion
- field
- fire heat
- growth branching
- ink
- law diffusion
- loop cycle
- nature machine
- network graph
- noise as signal
- opacity
- pigment
- plane sheet
- ribbon
- time as material
- transformation
- viscosity
- water