How Mathematical Animation Is Replacing Stock Photography in Web Design

Open stripe.com and look at the hero

Open stripe.com. That slow, organic, morphing surface of color filling the hero section — that's not an image. It's a mathematical formula running in real time. Fractal Brownian Motion, layered Simplex noise modulated by sinusoidal functions, all rendered in roughly 10KB of GLSL shader code. A retina hero image delivering the same visual impact would weigh 500KB.

In 2023, that gradient signaled something had fundamentally shifted. The most admired tech companies in the world had stopped using stock photography entirely. And the math behind their replacements was neither secret nor expensive to implement.

Why the shift is happening now

Open linear.app, vercel.com, or raycast.com. No stock photos above the fold. Instead: noise-driven gradients, particles tracing vector fields, parametric curves pulsing with data. Three forces are driving this across the industry.

Differentiation at zero marginal cost. Every parameter combination in a mathematical animation produces a distinct visual signature. Change one coefficient and you get a completely different pattern. Every client website gets a mathematically unique identity — not "unique" in the stock photography sense, but genuinely, provably unique.

Performance that improves with complexity. A GLSL shader rendering a complex surface weighs roughly 10KB. The same visual impact from raster imagery: hundreds of kilobytes. Mathematical animations scale perfectly to any resolution — 4K monitor, budget phone, the GPU recalculates every pixel at native resolution. No srcset, no responsive breakpoints, no art direction complexity. One formula, every screen.

Brand identity that breathes. Brands are moving from static marks to responsive, mathematically governed identity systems. The approach defines what must remain constant (the signature) and what can vary (the expression) — a design philosophy that mirrors living organisms. It's only possible through mathematical animation.

Reverse-engineering the Stripe gradient

The most influential mathematical animation in commercial web design breaks down into four layers. Understanding these layers is the key to building your own.

Layer 1 — Base noise field. Simplex noise evaluated at UV coordinates with a slow time offset. Chosen over Perlin noise for its lack of grid-axis bias.

Layer 2 — Fractal Brownian Motion. Six octaves of noise stacked, each at double the frequency and half the amplitude. A rotation matrix between octaves breaks grid alignment — this produces the organic texture.

float fbm(vec2 p) {
    float v = 0.0, a = 0.5;
    mat2 rot = mat2(cos(0.5), sin(0.5),
                    -sin(0.5), cos(0.5));
    for (int i = 0; i < 6; i++) {
        v += a * noise(p);
        p = rot * p * 2.0;
        a *= 0.5;
    }
    return v;
}

Layer 3 — Sinusoidal coordinate warping. Before sampling, UV coordinates are modulated with sinusoidal functions of time — this creates the "morphing" effect.

Layer 4 — Cosine palette color mapping. The noise output maps to color via color = a + b · cos(2π(c·t + d)). The entire effect compresses into roughly 10KB. What Stripe proved is counterintuitive: mathematical animation communicates sophistication and trustworthiness to enterprise customers.

The three complexity tiers

The most important decision isn't which formula to use — it's which complexity tier to implement at. The wrong choice means either an unnecessarily heavy page that kills Core Web Vitals, or a lightweight implementation that wastes the potential of the math.

Simple — CSS only

CSS natively supports sin(), cos(), and related trig functions across all modern browsers. Combined with @property for animatable custom properties, you can create genuine trigonometric orbit animations entirely without JavaScript. 60fps on budget phones, zero main thread impact, negligible battery drain.

Choose when: the animation is decorative, the audience includes budget devices, battery life matters, or development time is limited.

Medium — p5.js / Canvas API

When you need interactivity — mouse response, scroll depth integration, hundreds to thousands of moving elements. p5.js 2.0 (April 2025) introduced p5.strands — GPU shaders written in JavaScript instead of GLSL, collapsing the learning curve dramatically.

Choose when: interactivity is required, you need 500–10,000 moving elements, or you want seeded randomness for reproducible states.

Complex — WebGL / GLSL shaders

For hero sections that need to command attention: fractal explorers, 3D mathematical surfaces, fluid simulations. The GPU executes the formula for millions of pixels in parallel. WebGPU (now in all major browsers) pushes this further with order-of-magnitude performance gains for particle systems and compute-heavy effects.

Choose when: maximum visual impact is the goal, you need 10,000+ particles, or you're building a generative brand identity system.

For the complete code behind each tier, formula catalog, and production-ready patterns, see Part 2: The Developer's Guide to Mathematical Formulas & Tools.

Performance and accessibility

Mathematical animations must coexist with Google's Core Web Vitals: LCP under 2.5 seconds, INP under 200ms, CLS under 0.1. The key strategies:

• Code-split animation libraries out of the critical path. async/defer on script tags. Never make the animated canvas the LCP element.
• Intersection Observer starts/stops animations based on viewport visibility. Invisible animations burn zero CPU.
• Adaptive quality — detect device capability and scale particle counts accordingly. Budget phone gets 1,250 particles, desktop gets 5,000. Same visual character, different density.
• prefers-reduced-motion must be respected. Replace pulsing with gentle fading, slow transitions. WCAG 2.2.2: pause mechanism for animations lasting 5+ seconds.

The business case: ROI for EU projects

For the clients I serve across Slovakia, Czech Republic, Germany, Austria, and the US, mathematical animation isn't about aesthetics — it's about measurable outcomes.

Engagement impact. For a recent German SaaS client, replacing a stock hero with a CSS trigonometric animation cut page weight by over 400KB and bounce rate dropped roughly 10% within the first month. Time on page increases because the visual environment rewards exploration. The first impression communicates craft, not commodity.

Development efficiency. A single formula with parameterized variations generates an entire visual identity system. One Clifford attractor with four tunable parameters produces infinite unique brand expressions — no asset library, no stock photo subscriptions, no licensing headaches.

Cost comparison for a typical project:

• Simple tier (CSS-only): 2–4 additional hours, ~€200–400
• Medium tier (p5.js): 8–16 additional hours, ~€800–1,600
• Complex tier (WebGL): 24–40 additional hours, ~€2,400–4,000

Against the lifetime value of a business website (typically 2–3 years), even the complex tier represents a small fraction of total project cost while delivering disproportionate visual impact and competitive differentiation.

Pick your tier and ship this week

For most business websites, the simple tier is the right starting point. A CSS trig animation takes 2–4 hours, ships at 60fps on every device, and costs under €400. That's enough to replace a stock hero, differentiate your homepage, and pass every Core Web Vitals threshold.

If you need interactivity or a generative identity system, step up to medium or complex — but only after the simple tier proves the concept works for your audience. The math scales; your implementation should too.

For the complete formula catalog, interactive demos, and production-ready code patterns, read Part 2: The Developer's Guide to Mathematical Formulas & Creative Coding Tools.

Considering mathematical animation for your project? I'd love to discuss which tier makes sense for your goals.