Organic Biomorph: a website that feels alive

Organic Biomorph is built from things that seem to grow. Refractive drops that melt into one another. Silk ribbons drifting through the frame. Lettering with sculptural, cell-like curves. Grounds the colour of leaves, moss and deep water.

Where most websites are built from boxes, this one is built from forms.

The specimen, for a fictional skincare brand made from hand-harvested moss, pairs "Grown slowly, on purpose." in a sculptural display face with a cluster of glassy forms drifting over a pale leaf-green ground, and three small pill labels for the product facts.

Where it comes from

Biomorphism is an old idea in modern art. In the twentieth century, sculptors and painters such as Jean Arp and Henry Moore made abstract forms that read as bodies, seeds and stones. In the late 1990s architects took it into buildings with curving, computer-designed shells.

On the web, it became practical once browsers could render refraction and soft deformation in real time. Organic Biomorph uses that to make forms that move like living things: slowly, with weight, and in response to the visitor.

What defines it

Palettes

Type

• Display: Ojuju. A display face with organic, sculptural forms inspired by uli, a traditional Igbo art of flowing line. It is distinctive and warm, and unlike anything on a typical website.
• Text: Onest. A calm, slightly rounded sans that stays out of the way.

A face like Ojuju is a strong flavour. It is used for statements and the brand name, never for long text.

Motion and depth

The 3D here is abstract and procedural, which suits the subject: living forms are better suggested than modelled badly.

• Glass blob: thick refractive drops that melt together and bend whatever sits behind them, with rainbow dispersion and a hard specular streak.
• Ribbon flow: a bundle of satin ribbons swelling together, each twisting on its own, parting around the cursor.
• Liquid field: pigment rivers that the cursor stirs into slow vortices.

Everything drifts slowly. Parallax is gentle. With reduced motion switched on, the forms hold one composed frame.

The rule that keeps it honest: never build a plant or a creature out of primitive shapes. A flower made of cylinders and flat ellipses is exactly the crude stand-in Laarpi refuses. Either use a real scanned specimen, as the night-garden site in the community does, or abstract it into light, glass and ribbon.

A typical page, section by section

Every site is designed for its own idea, so treat this as a sketch, not a template. A page in this style often runs like this:

1. The living stage. Headline beside a cluster of glassy forms or drifting ribbons.
2. Offset features, each fact or ingredient set beside a different, slowly drifting form.
3. Chapters beside the stage: the story told in short sections while the forms change shape behind it.
4. A drifting collage of photographs at different heights and gentle parallax.
5. The call to action on a deep ground, with the forms gathering around it.

Fewer sections suit this style. Living things need room.

Who it suits

More on these in the use cases for brand websites and product launch pages.

How it goes wrong

• Blobs as wallpaper. A random gradient blob behind every section is the generated-site version of this style. The forms must mean something: moss, water, growth, a product's texture.
• Glassmorphism for no reason. Frosted cards everywhere look soft and say nothing. Organic Biomorph uses real refraction, sparingly.
• Crude nature. Plants and animals assembled from spheres and cones. Use real assets or abstraction.
• Low contrast on pastel grounds. Pale leaf green needs a deep forest ink. Every pairing is checked.
• Everything rounded and nothing aligned. Curves on top, grid underneath. Without the grid it feels unfinished.

What to prepare

• One material to build the forms from: the product's texture, an ingredient, the water, the seed.
• Product facts in short form: ingredient percentages, sizes, origin. They become the small labels that ground the soft visuals.

Making it yours

• "A skincare brand made from moss harvested by hand once a year in the fjords. Slow, calm, a little strange."
• "A marine conservation charity. The site should feel underwater."
• "A tea company with six single-origin teas. Each tea's colour drives its section."

The guide on how to build a 3D website and the 3D website builder explain how abstract 3D is chosen and built. For the scientific side of nature, see Botanical Archive. For the same glass in a cooler key, Liquid Chrome. For nature after dark, Cinematic Noir.