Festive Effects Widget
Give your website a light seasonal touch: cherry-blossom petals in spring, maple leaves in autumn, snow in December, hearts for Valentine's Day, clovers for St Patrick's, glowing lanterns through Ramadan and Eid, marigold petals with diya lights at Diwali and a confetti burst at New Year. Leave it on auto and the calendar picks the season for each visitor.
Live preview
Under the widget on your page: Festive Effects by A2Z Tools
Embed code
<div data-a2z-kit="festive-effects"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
The kit adds one transparent canvas the size of the browser window on top of your content and draws every snowflake, petal, leaf, heart, clover, lantern, marigold petal, diya and confetti strip with canvas paths - no image downloads and no emoji fonts. The canvas has pointer-events: none, so links, buttons, forms, scrolling and text selection underneath behave as if it were not there. Each piece gets its own size, depth, spin and sideways sway, and leaves, petals and confetti tumble by being squashed on one axis as they turn. Lanterns rise slowly with a warm flickering halo; confetti opens with a short burst from both top corners and then flutters down. On auto, the visitor's local date is matched against a short table: moving festivals first (Ramadan to Eid al-Fitr, Eid al-Adha, Diwali), then fixed dates (New Year, Valentine's, St Patrick's), then the seasons. Outside every window nothing is drawn. Animation pauses whenever the tab is hidden, and visitors who ask their device for reduced motion see nothing moving unless they press the small round switch themselves.
Method
- Auto, by the visitor's local calendar date: Ramadan 1 to Eid al-Fitr + 2 days and Eid al-Adha - 1 to + 3 days = lanterns; Diwali (Lakshmi Puja) - 3 to + 2 days = marigold petals and diyas
- Then fixed dates: 31 Dec - 2 Jan confetti, 7-14 Feb hearts, 10-17 Mar clovers; then seasons: 20 Mar - 30 Apr petals, 15 Oct - 25 Nov leaves, 1-30 Dec snow (northern hemisphere)
- Moving festival dates are a built-in table for 2026-2030: Umm al-Qura calendar (as computed by the ICU islamic-umalqura calendar) for Ramadan and both Eids, Drik Panchang (New Delhi) for Diwali
- Pieces on screen: low 24, medium 44, high 70 at 1024 px and wider; x 0.7 below 1024 px and x 0.45 below 600 px; lanterns use a third of that; never more than 70
- Canvas backing store = window size x devicePixelRatio, capped at 2; the requestAnimationFrame loop stops while document.hidden is true and after the optional run time fades out over 1.6 s
- Optional from/until (YYYY-MM-DD, inclusive) limit any effect to a date range on the visitor's calendar
Worked examples
Auto during Diwali week
Inputs: effect auto, visitor's clock 2026-11-06 (Diwali is 8 November 2026)
Result: Marigold petals falling with a few glowing diyas floating up
6 November is inside the Diwali window (5-10 November), which takes precedence over the autumn-leaves season (15 October - 25 November).
Auto when Eid falls in spring
Inputs: effect auto, visitor's clock 2026-03-21
Result: Rising lanterns, not spring petals
Eid al-Fitr is 20 March 2026 and its window runs two days past it, so lanterns win over the season that starts on 20 March; on 23 March petals take over.
Christmas snow for a fixed fortnight
Inputs: effect snow, from 2026-12-10, until 2026-12-26, density low
Result: About 24 snowflakes on a laptop, 11 on a phone, only between those dates
Low density is 24 pieces at 1024 px and wider and 24 x 0.45 = 11 below 600 px; outside the range nothing is drawn.
Limitations
- Seasons follow the northern hemisphere: autumn leaves in October and spring petals in March. Sites in Australia, South Africa or South America should choose an effect and dates themselves.
- Ramadan, Eid and Diwali dates are built in for 2026-2030 only, and local moon sighting or regional calendars can differ by a day.
- It trusts the visitor's device clock; a phone with the wrong date shows the wrong season.
- Snowflakes are white with a faint blue edge, so they look subtle over a plain white page and stand out more over photos or darker sections.
- One effect at a time; very old browsers without canvas or Shadow DOM simply show nothing.
Where publishers use it
- A sweet shop or gift store that wants marigold petals and diya glows over its Diwali offers page for the festival week only, with from and until set
- A mosque, Islamic school or halal restaurant site showing rising lanterns from the first night of Ramadan through the days after Eid, without anyone remembering to switch it on
- A florist or garden centre running spring petals on the home page, kept at low density so product photos stay clear
- A small business blog left on auto all year: leaves in autumn, snow in December, confetti for New Year, and a quiet page the rest of the time
Questions
Will the falling snow or petals get in the way of my buttons and links?
No. The canvas ignores the mouse and touch entirely (pointer-events: none), so every click, tap, scroll and text selection reaches your page underneath. Only the small round switch in the corner is clickable, and you can remove it with data-toggle="off".
How does auto know when Ramadan, Eid or Diwali is?
These festivals move every year, so the script carries a small table of dates for 2026 to 2030: the Umm al-Qura calendar for Ramadan and both Eids, and Drik Panchang (New Delhi) for Diwali. Local moon sighting can shift Eid by a day, which is why each window starts early and runs a few days past the festival. From 2031 the moving festivals need an updated script; the fixed dates and seasons keep working.
What happens on dates with no festival or season?
Nothing is drawn: the component loads, finds no matching window and stays idle, with no canvas and no switch. Summer and most of January are quiet by design. To show something regardless of the date, pick a specific effect instead of auto.
Does it slow my page down or drain phone batteries?
It draws at most 70 small shapes (around 30 on a phone), on one canvas whose resolution is capped at twice the screen size, and it stops completely when the tab is in the background, when the visitor switches it off, or when your run time ends. Setting data-duration="20" plays it for twenty seconds and then fades it away.
What about visitors who are sensitive to motion?
If a visitor's device is set to reduce motion, nothing moves when the page opens; the switch is still shown, so they can choose to turn the effect on. Anyone who turns it off keeps it off on your other pages, because that choice is remembered in their browser.
Sources
- ICU User Guide: Calendar Classes (islamic-umalqura) - Unicode Consortium . Umm al-Qura dates for 1 Ramadan, 1 Shawwal (Eid al-Fitr) and 10 Dhu al-Hijjah (Eid al-Adha), 2026-2030
- Diwali Lakshmi Puja dates (New Delhi) - Drik Panchang . Lakshmi Puja: 8 Nov 2026, 29 Oct 2027, 17 Oct 2028, 5 Nov 2029, 26 Oct 2030
- Media Queries Level 5: prefers-reduced-motion - W3C . The system setting that keeps the effect still until the visitor turns it on
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Festive Effects https://a2z.tools/embed/festive-effects
<a href="https://a2z.tools/embed/festive-effects">A2Z Tools Festive Effects</a>
[A2Z Tools Festive Effects](https://a2z.tools/embed/festive-effects)
Festive Effects by A2Z Tools - https://a2z.tools/embed/festive-effects
Related widgets
-
A Christmas or New Year countdown whose scene changes daily: advent windows light up, stars fill the sky.
-
Days, hours and minutes to the next Christmas, Easter, Thanksgiving, Black Friday or 13 other holidays.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
A slim top-of-page message strip with icon, link button, colour tone and optional start and end dates.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
-
An automatic table of contents from your headings, with active-section highlight and sticky-header offset.
