Soft field.
Sharp edge.
An expanding membrane turns a simple circle into a living surface. Depth comes from the boundary.
Live rendering is unavailable. This static radial gradient preserves the composition; the reference frames remain available below.
Three readings.
Material combines a soft radial field with narrow spectral highlights. Controls are additions for this study.
What the reference shows
Original video frames · 720 × 720 · 30 fps
Three frames extracted from the supplied public reference for analysis. Artwork: @marioecg, “Outflow.” The moving canvas above is original reconstruction code.
Motion and material
- Outward propagation. A small central contour grows into a disc, then a larger edge extends beyond the crop.
- Pinching at the center. New inner shapes are asymmetric before becoming approximately circular.
- Thin spectral rims. Cyan, magenta, yellow, and red bands wrap a softly shaded boundary.
- Ambiguous depth. Interior shading alternates between recessed and inflated readings.
- Minimal composition. A pale square field, one centered motif, no visible controls or input.
A field is enough
- Radial phase field generates successive expanding contours; an angular warp produces a pinched center.
- Height derivatives provide pseudo-normals for the soft light and shaded interior.
- Edge masks and a spectral palette approximate iridescence and chromatic separation.
- A fullscreen fragment shader is a practical first implementation. A displaced mesh is an option if real parallax is needed.
The reference does not establish fluid dynamics, physically accurate thin-film interference, a specific renderer, or any user-driven interaction. This reconstruction is phenomenological.
Reconstruction recipe
WebGL 1 · single pass · no dependenciesCoordinate field
Center UV coordinates and preserve aspect ratio.
Traveling contour
Move radial phase outward. Keep multiple rings to avoid a full-frame reset.
Deform the core
Apply a rotating angular warp that fades toward the outer edge.
Shade the field
Differentiate a smooth height surrogate. Add broad warm and cool lobes.
Color the rim
Use narrow spectral bands, a soft halo, and bounded highlights.
r = length(p) + coreWarp(p, time) phase = 2π · (r − velocity · time) / spacing height = sin(phase) / (1.25 − 0.75 · cos(phase)) normal = normalize(vec3(−∂height/∂x, −∂height/∂y, 1)) edge = exp(−abs(sin(phase / 2)) · sharpness) color = softLighting(normal) + spectralRim(edge, phase, angle)
These equations document this study's implementation, not the artist's method. Motion period, spectral colors, and warp strength are visual tuning choices.
Implementation notes and acceptance checks
- The canvas uses a fullscreen triangle and one fragment shader. There is no fluid solver, geometry model, external library, font, or network request.
- The pixel ratio is capped at 1.5; the longest render dimension is capped at 1,000 pixels. Animation stops while the document is hidden or the canvas is offscreen.
- Reduced-motion preference starts the study paused. All controls have text labels, focus outlines, and keyboard access. A static background remains if WebGL is unavailable.
- Inspect center birth, pinching, circular expansion, edge cropping, and the next birth. Check that motion has no whole-frame reset.
- Use Geometry mode to inspect the underlying height surrogate. Focus halo uses a stable footprint and restrained color; its continuous animation is decorative activity.
- Before production use: measure frame time and battery cost on the actual iPhone, test context loss and reduced motion, and compare against the full original clip. The shader compiled and all three modes rendered in an offline OpenGL compatibility renderer with no GL errors; JavaScript syntax and control logic were checked separately. Browser layout, WebGL device behavior, and user comprehension remain unverified.
Transfer into our interfaces
Keep the visual purpose explicit| Surface | What transfers | Boundary |
|---|---|---|
| Companion | An ambient activity orb: soft interior, restrained deformation, luminous rim. | Bind activity to a real agent state. Keep a stable text label. An endless pulse must not imply measurable progress. |
| Assure | A thin contour for selected sensor footprints, areas of influence, or focus regions. | Keep operational geometry stable. Use an explicit, calibrated mapping for uncertainty; do not animate its size decoratively. |
| Research / brand | Material studies, section transitions, and focused hero moments. | Preserve pause and reduced motion. Keep the full rainbow treatment away from alert and confidence semantics. |
Provenance
Entry key:
Creator: @marioecg
Caption: “Outflow”
Source post: DexAkwPET1L ↗
Captured: October 21, 2026
Inspected media: 10.000 seconds · 300 frames · 720 × 720 · H.264
Classification: procedural ambient motion / iridescent material
Source license and original implementation: not established
A visual reference,
not a validated interaction.
Frame inspection supports the motion and appearance notes. The source shows no pointer, touch gesture, user task, controls, data binding, or accessibility behavior. Geometry view, Focus halo, sliders, pause, and time inspection are additions made for this archive study.
No claim of exact reproduction, recovered source code, physical simulation, or production readiness is made. Preserve creator attribution when using this entry as a design reference.