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.
She switches things on
Mark an element with data-tinker-class="lit" and the
first time she alights there she adds the class — under a sprinkle
of fairy dust — and your CSS does the rest. These lanterns are dark
until she's touched each one; unlit things draw her a little more
strongly, so give her a moment and she'll make her rounds.
These lanterns are also ordered and eager:
data-tinker-order makes her light them first, second,
third, and data-tinker-eager means she hurries — no
dawdling, no stunts, barely a pause on each before the next.
Or hand her something bigger. This tree is one element and one
class — her landing adds lit, and staggered CSS
transition delays do the carolling, each bauble warming in turn,
star last.
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.