LET IT SETTLE
Made for your interface.
Snow follows the surface.
Give it a little nudge.
Introducing Fluri
A little winter.
A little winter.
All over your web.
Turn ordinary interfaces into little winter landscapes. Snow that settles, follows your layout, and invites a moment of play.
Open sourceTypeScriptMade to make you smile
Live previewThe real Fluri engine
A FORECAST OF YOUR OWNA little winter.
A lot of wonder.
A lot of wonder.
A soft place to land.
Drag the handle to move the card. Brush an edge. Shift + drag to roll a snowball.
↳ A small preview of a very snowy possibility.
A LITTLE WINTER, IN YOUR STACK.
JavaScriptJSTypeScriptTS React VueNext.jsYour framework
MORE THAN A FALLING EFFECT
Snow with a sense
of where it belongs.
Most snow stops at the screen. Fluri gives it a place in your interface — and lets your visitors become part of the forecast.
It finds your edges.
Snow gathers along supported cards, navigation bars, and buttons. Move the element; the snow comes along.
It invites a little play.
Brush a fresh edge, gather a snowball, or send a snowplough across a shelf. A small interaction can change the scene.
It feels like your own.
Choose from ten presets. Tune the wind, flakes, and snow depth, then export your configuration from the playground.
A WARMER KIND OF WINTER
FOR THE SEASON. OR JUST THE FEELING.
Quiet mornings.
Festive evenings.
Your kind of winter.
A barely there dusting for a portfolio. A playful snowfall for a launch. A string of warm lights for the season. Start with a mood and make the details yours.
Gentle snowWinter magicChristmas night
Explore the possibilities
A FEW LINES TO THE FIRST FLAKE
A small setup.
A whole new season.
A framework independent core. Typed configuration. An explicit lifecycle. Start the weather when your page is ready, and clean up when it leaves.
Build your first snowfall
TypeScript native
No account or API key
import { createWeather } from '@themes/fluri';
const weather = createWeather({
preset: 'gentle-snow',
dom: { detection: 'explicit' },
});
weather.start();
// Release the effect when your page unmounts.
window.addEventListener('pagehide', () => {
weather.destroy();
}, { once: true });import { useFluri } from '@themes/fluri-react';
export function WinterPage() {
const weather = useFluri({
preset: 'gentle-snow',
dom: { detection: 'explicit' },
});
return (
<article data-weather-surface>
<h1>A little winter.</h1>
<button onClick={() => weather.current?.pause()}>
Pause snow
</button>
</article>
);
}<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import { createWeather } from '@themes/fluri';
const weather = createWeather({ preset: 'gentle-snow' });
onMounted(() => weather.start());
onBeforeUnmount(() => weather.destroy());
</script>
<template>
<article data-weather-surface>A little winter.</article>
</template>A GOOD GUEST ON YOUR WEBSITE
Delight, with care.
Your interface comes first.
Pointer-transparent canvases preserve ordinary clicks and scrolling. Choose exactly which surfaces collect snow.
Motion is always optional.
Reduced-motion preferences are respected, hidden tabs suspend animation, and visitors can pause the preview.
The forecast stays local.
No weather API, geolocation, or engine telemetry. Pointer interaction is processed in browser memory.
Does it work with my framework?
The core uses browser APIs and works independently of your UI framework. Start it after the DOM mounts and destroy it during cleanup. The optional React adapter handles that lifecycle for you. The documentation includes TypeScript, React, and Vue examples.
Will snow get in the way of my website?
The rendering overlay is pointer-transparent. Normal links, forms, and scrolling remain available. Use explicit surfaces and exclude important content with data-weather-ignore. Always test your own page and target devices.
Can I use it on a commercial project?
Yes. Fluri uses the MIT license, which permits commercial use, modification, and redistribution while retaining its copyright and license notice. Read the full license for its conditions.
What about performance on mobile?
Adaptive quality bounds snowfall by visible area and device input class, responds to late frames, and reduces rendering cost under pressure. You can also set particle, surface, DPR, and FPS budgets. Performance depends on your device and page; there is no universal frame-rate guarantee.
Is this a weather forecast service?
Fluri is an interactive visual effect for websites. It simulates winter locally and does not fetch real weather or your location.
SMALL DETAILS. LASTING IMPRESSIONS.
Make room for
a little wonder.
Your website. Your forecast.