Stickybit.← NotebookPortuguêsWeb design trends · Sep 28, 2026
Proposal

After paper, living matter.

Twenty years of design swinging on the same string: imitate matter or embrace the screen. The pendulum is resting on editorial humanism. Push it and it comes back to the axis. Pull hard and it leaves.

Drag the green ball. Let go to make it swing; stretch it past the limit to snap the string.
The pendulum

Twenty years on the same axis.

Each style was a reaction to the one before, but almost all of them moved along a single line: how much the interface pretends to be an object. Skeuomorphism imitated leather; flat embraced the screen; gradients and glass went back to faking light and matter; brutalism and pixel art embraced the machine again; editorial humanism went back to faking paper. None of them changed what the page does. They all stayed still images.

This section's diagram became the hero: under the pendulum, the timeline of the seven styles, with the stem pointing up for those that imitated matter and down for those that embraced the screen. The dashed line across the tips traces the swing. My reading, not a measurement: positions show which way each style pulled, not how far. Apple's Liquid Glass (2025) tried to get out through light and refraction and ran into legibility; Apple itself backed off at WWDC 2026.

1637542 ← imitate matter embrace the screen →
  1. 1Skeuomorphism2007–12
  2. 2Flat2013–16
  3. 3Gradient and glass2017–20
  4. 4Brutalism, Y2K, neon2020–23
  5. 5Pixel and dither2022–24
  6. 6Editorial humanism2023–26
  7. 7Liquid Glass2025
Chronophotography, in the manner of Marey: seven positions of the same pendulum, numbered by date. The side comes from the axis; the spacing is mine, for readability. The dashed line follows date order and shows the back-and-forth: every position falls on the same arc.
The thesis

The rubber band snaps back, but not to the same place.

The backlash against "AI slop" is strong: texture, grain, handmade, collage, interface nostalgia. It is a fair reaction, but it stays on the image axis, and it is already being copied: cream paper, serif and terracotta have themselves become the default AI look.

The way out is to treat the interface as a material with physical properties: mass, tension, viscosity, growth. The warmth comes from how the thing responds, not from looking like paper. And the material only moves when you move it; at rest, the page is legible and quiet. It is the opposite of Liquid Glass, which moves and refracts all the time and makes reading pay for it.

1 Rest legible and quiet 2 Touch stretches, resists 3 Off the axis living matter
The same gesture as the hero, in three frames: at rest, the page reads; pulled, it resists; let go past the limit, it leaves the axis and becomes material. The dashed ghost marks where it was.
  1. Behavior before texture

    Spring, inertia and viscosity instead of paper grain. The warmth is in the response to the gesture.

  2. Rest is sacred

    Nothing moves on its own enough to get in the way. Pull, stretch, return. With reduced motion, it stays still and remains complete.

  3. Shape comes from data

    No decorative blob like in 2019. The organic shape is computed from something real about the client.

  4. One material per page

    Elastic, fractal or viscous. Pick one and leave the rest in editorial silence.

  5. Type with an axis

    Variable fonts as matter: width and weight react, but the word never becomes illegible.

  6. Seeded imperfection

    Deterministic noise, not random: the same irregular edge every time, like a signature.

Proposal A · Tension

Elastic type: pull it and it returns.

Pull the page.
It returns.
Move the cursor or drag a finger over the letters.
Como funciona

Each letter is a body on a spring. Near the cursor, the variable font's width (Roboto Flex's wdth axis, from 25 to 151) grows and the weight goes up; farther away, everything returns to the original drawing, with a slight wobble.

In e-commerce
The "has no eyes." headline on the e-commerce page would stretch toward the cursor as if the agent were pulling the text, and spring back when it leaves.
Reference
Elastic typography is one of the trends cited for 2026: letters that stretch and flow, suggesting motion.
Cost
Low. One variable font and 30 lines of JS.
Proposal B · Fractal edge

The lens with a coastline edge.

The agent reads your store from the edge.

Move the cursor: the lens has a fixed fractal edge (seed 29).
Como funciona

The lens radius adds up 40 harmonics whose amplitude falls off as 1/k. The result is a coastline outline that looks the same at every scale. The seed is fixed: the edge is always the same, like a signature, and it turns slowly.

In e-commerce
An alternative to the lens in the e-commerce hero. More technical than the drop; it speaks to the "raw data" the agent reads.
Variation
The organic drop (already used in the hero of the disruptive page) is the soft version: few harmonics, stretched by speed.
Cost
Low. The same SVG mask as the drop, with a different radius function.
Proposal C · Viscous

Two drops that become one: the brand as physics.

one channel.
Your store and the AI agent. When they meet, they become a single channel.
Drag the smaller drop to the larger one.
Como funciona

Two blue drops under a filter that merges nearby shapes (metaballs). The smaller one follows the cursor with a spring lag; when it touches the larger one, the two join through a viscous neck and merge. Let go, and it returns to its place.

In e-commerce
The idea becomes behavior: store and agent, two parts that join. It works as an animated icon for the channel between them.
Versus Liquid Glass
The liquid stays behind; the text stays solid on top, with no refraction, always legible.
Cost
Low. One SVG filter and two elements; no WebGL.
Risks

Where this goes wrong.

Becoming the 2019 blob

An organic shape without meaning turns into Dribbble decoration. Rule 3 exists for this: the shape has to come from the client's data or idea.

Tiring motion

Everything moving all the time is Liquid Glass's mistake. One material per page, only on touch, and prefers-reduced-motion respected.

Phones

Without a cursor, the physics depends on the finger and on scrolling. Each specimen needs a good-looking resting state and a touch trigger.

Performance

A per-frame SVG mask and a blur filter cost CPU on large screens. Limit the animated area and stop animating off screen.

← Research notebook · stickybit.com.br

Sources