Flock Heading
A headline that crumbles into a flock of birds from one side to the other, flies a random route around the stage, swerves around your cursor, then streams back in and settles on its letters until the real text returns. Scatter on hover, on scroll, on a loop or from code.
Canvas 2D0 deps1 file · 28 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useImperativeHandle, useRef } from "react";
import type { CSSProperties, Ref } from "react";
/**
* FlockHeading — a headline that breaks into a flock of birds and flies back
* in to rebuild itself.
*
* At rest it is plain, selectable DOM text in your own font. When it
* scatters, the text is sampled into points exactly where its glyphs sit,
* each point becomes a small bird, the letters crumble into specks from one
* side to the other, and the birds lift off as a flock. They fly a random
* route around the stage as 3D boids (wings that beat and glide, banking,
* pale wing undersides, depth haze) and swerve around the pointer. Then they
* stream back in from all sides, settle on their letters, and the real text
* fades back in. While it rests nothing runs at all.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
At rest it is plain, selectable heading text in your font, and nothing runs. When it scatters, the text is sampled into points exactly where its glyphs sit, the letters crumble into specks in a wave from one side to the other, and each speck unfolds into a bird and lifts off. The birds fly a random route around the stage as a flock, with wings that beat and glide, banking into turns, paler wing undersides and depth haze, and they swerve around your cursor. Then they stream back in from every side at different moments, shrink back into specks on their letters, and the real text fades in over them. Scatter it on hover (a tap on touch screens), as the heading starts to scroll away, on a loop, or from your own code with apiRef.scatter() and gather(). Style the heading with ordinary classes: the birds take its font, size and colour.
Curator’s note
Pro because the text really becomes the flock: the heading is sampled at its exact glyph positions in your own font, each point becomes a 3D bird with its own wingbeat and banking, and the flock flies a route of its own before every bird returns to its own spot on its letter.
