tinkerbell.js
An impudent little spark that flits about your page, alighting where she pleases and leaving everything a touch more magical.
Scroll, and she follows
The spark rides along as you scroll — swooping toward whatever's arriving on screen. Stop for a moment and she'll grow bored: expect loop-the-loops, somersaults and figure-eights until something catches her eye.
Give her somewhere to land
Any element with a data-tinker attribute is fair game.
Name an effect and that's what happens when she alights. Each card
below suggests a different one:
Sparkle
data-tinker="sparkle" — a burst of twinkling motes on landing.
Glow
data-tinker="glow" — a coloured aura breathes around the element.
Gilding
data-tinker="gilding" — light traces the border in glitter.
Pixie dust
data-tinker="dust" — dust drifts down and winks out.
Frost
data-tinker="frost" — rime creeps along the edges, always icy blue.
Embers
data-tinker="embers" — warm sparks rise as from a settling fire.
Moonbeam
data-tinker="moonbeam" — a shaft of pale light sweeps across.
She takes requests
The JS API can summon her anywhere:
spark.alight(element, 'dust').
She traces true shapes
Gilding follows the element's real outline. Rounded corners are rounded in flight — and on SVG she traces the actual geometry, not the box around it. She'll also sometimes slip behind a card or image mid-journey, glowing through from the other side of the page.
Now you see her
On longer flights she sometimes slips behind the page — opaque things like the cards hide her while her glow slides beneath them. It happens on its own, but you can also ask:
These panels are solid — when she's behind the page they hide her completely, and you'll catch her glow crossing the gaps between them before she shimmers back through a few seconds later.
She creates
The painting below does not exist yet. Anything marked
data-tinker-conjure is born invisible, and stays unborn
until she flies its outline and draws it into the world. Pause here
and watch her work — and if you interrupt her, she remembers how far
she got and finishes the job later.
Bring your own magic
Effects are plugins. This heading uses ripple, a custom
effect registered by this very demo page in a couple of dozen lines —
rings of light pulsing outward from wherever she lands.
Three temperaments
The same spark, different moods. Shy rests long, hides behind things and wants nothing to do with your cursor. Showoff can't sit still. Impudent — the default — is somewhere in between.
Shy shows best if you leave the mouse alone and just watch; showoff shows best if you do nothing at all — she can't bear to be ignored.
She knows about your cursor
Rush the mouse at her and she bolts. Creep up on her perch and she startles off it. But leave the cursor perfectly still for a few seconds and — sometimes — she'll come and have a look at it, circling warily until it twitches.
Good manners included
She respects prefers-reduced-motion and simply stays home
when asked. The whole act happens on one canvas overlay — your page's
layout is never touched, and she never intercepts a click.