UP TO
SNOW GOOD.
Leave a little
SOMEONE HAS OTHER PLANS. ↗A present.
A plan.
A little problem.
KEEP AN EYE ON THE RIBBON. ↗
Maybe his
heart just
needs a nudge.
THERE'S STILL TIME TO BE NICE. ↗
Give him
a little nudge.
He sneaks, climbs and stashes presents. Get a little too close and watch his plans unravel. Or see what happens when he finds his heart.
He came for the presents.
You'll stay for the details.
Plan. Climb. Pinch.
A proper heist, one present at a time. Sneaky footsteps, reaching hands, a growing sack and a suspiciously satisfied grin.
He knows your edges.
Illustrated presents settle on real elements. The resident climbs between ledges, ducks behind cards and peeks around the edge.
A little heart goes far.
Kindness mode brings the presents home. He'll wave, warm up and give everyone a break from the mischief.
A little preview.
Sneak · Climb · Steal · Hide · Find a little kindness
Try every little feature ↗import { createGrinch } from '@fluritheme/grinch';
const visitor = createGrinch({
targets: '[data-grinch-gift]',
mood: 'mischievous',
});
// A little kindness changes the story.
visitor.redeem();
// Clean up when your page unmounts.
visitor.destroy();
A few little questions.
How do I place presents on my website?
Mark an element with data-grinch-gift. The package draws an illustrated
present on its upper edge. You can also pass a selector or a list of elements.
Does he keep up when the page moves?
He uses document coordinates. Present anchors follow scrolling, moving elements and ordinary layout changes, including while paused. Overflow and native top-layer dialogs still apply.
What about reduced motion and touch?
Reduced-motion visitors get a still character. Touch scrolling stays native, and the overlay lets normal clicks pass through. Optional visitor pause controls are available.
Can I use him with Winter?
Yes. The packages run independently. Add data-grinch-gift to your
snow-covered surfaces and let both characters share the scene.
Make room for
a little mischief.