Fractal Background for React

Q: How do I make it faster or slower?

speed multiplies the pace: at 1 the near fern zooms one turn every 10 seconds and the far one every 17, so the two drift past each other. 0.5 halves it, 2 doubles it.

Q: Can I change the shape?

count sets how many fronds spiral in, from 3 to 12 (6 by default). twist sets how far each frond turns from one branch pair to the next, in degrees: 0 draws straight spokes and 16 tight spirals.

Q: How do I recolour it?

lineColor colours the near fern and accentColor the far one; both take any CSS colour. By default they're 34% and 16% of your theme's foreground, so the fern follows light and dark mode. You can also set --fractal-color and --fractal-accent from CSS, and --fractal-stroke for the line width.

An infinite fractal zoom: fern fronds spiral in toward the centre, every branch splitting into smaller ones, and the view zooms in forever. For React with Base UI, when a calm, nature or science page wants depth and slow motion behind its copy.

An infinite zoom into a fractal fern. Fronds spiral in toward the centre of the box, each branch splits into smaller branches, and every turn of a frond is a scaled copy of the one inside it, so the view can zoom in forever: it grows by exactly one turn per cycle and the loop never jumps. A fainter far layer drifts at its own pace behind, and the centre, where the lines grow too fine to see, fades out. It's SVG drawn once at render and turned and scaled with CSS transforms; nothing runs in script.

Use it where a page should feel deep and calm: a wellbeing app, a nature or science product, a hero with centred copy. For frost that creeps in from the edges, use Crystals; for single-colour contour lines, Topography; for other line art in motion, Paths or Magnetic Field; for points joined by lines, Constellation.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Fractal } from "@/components/ui/fractal";

Fractal is a container: give it a height and put your content inside. The fern fills the whole box at any size and aspect, and its centre stays calm, so centred copy reads well.

<Fractal className="flex min-h-[420px] flex-col items-center justify-center">
  <h1 className="text-5xl font-semibold">Grow something that lasts</h1>
</Fractal>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<Fractal className="fixed inset-0 -z-10" />

Demos

Spring

lineColor and accentColor take any CSS colours, here a leaf green for the near fern and a soft teal for the far one, on a dark panel. twist={12} winds the fronds into tighter spirals.

PreviewCode

In a card

count={5} draws five fronds, twist={0} makes them straight spokes, and speed={0.6} slows the zoom, a quieter fern for a small box.

PreviewCode

Accessibility

The fern is decoration: it's hidden from screen readers and lets every click through to the content. With reduced motion it stands still, a fern spiral frozen mid-zoom. Nothing flashes. The lines are thin and the centre fades out, so text on top in your foreground colour keeps its contrast in light and dark; at intensity="strong" keep small text near the centre.

FAQ

How does it zoom forever without a jump?

Every turn of a frond is the turn inside it, 1.3 times larger and turned a little further round. The view zooms in by exactly that much in one cycle, so the last frame is the first one again, and the loop restarts where you can't see it.

How do I make it faster or slower?

speed multiplies the pace: at 1 the near fern zooms one turn every 10 seconds and the far one every 17, so the two drift past each other. 0.5 halves it, 2 doubles it.

Can I change the shape?

count sets how many fronds spiral in, from 3 to 12 (6 by default). twist sets how far each frond turns from one branch pair to the next, in degrees: 0 draws straight spokes and 16 tight spirals.

How do I recolour it?

lineColor colours the near fern and accentColor the far one; both take any CSS colour. By default they're 34% and 16% of your theme's foreground, so the fern follows light and dark mode. You can also set --fractal-color and --fractal-accent from CSS, and --fractal-stroke for the line width.

Where do I put text?

Anywhere: the fern fills the box edge to edge and fades out toward the centre, so a centred headline sits on the calmest part.

What happens with reduced motion?

Both layers stop where they are, so the fern stays on screen as a still spiral.

Is it expensive?

No. The fern is drawn once: one piece of frond, reused by SVG for every turn and every frond. The browser only scales and turns two layers, without repainting them, and no script runs.