Time of Magic — a collection of fun visual effects for Flarum

Stezkoy

Time of Magic for Flarum

✨ A collection of visual effects and UI enhancements for your Flarum forum — progress bar, back-to-top button, falling snow, custom scrollbar, click sparks, layout swap, and background patterns.

🪄 Features

📊 Scroll Progress Bar — thin bar below the header that fills as you scroll, smooth animation
⬆️ Back to Top Button — floating button (circle or rounded square) that appears on scroll, any FontAwesome icon
❄️ Falling Snow — animated snowflakes with 3 density levels (light / medium / heavy)
🖱️ Custom Scrollbar — themed scrollbar for both Firefox and Chromium browsers
✨ Click Spark — sparkle burst at cursor position on every click
🔄 Swap Sidebar & Content — moves the sidebar to the right, discussion list to the left
🎨 Background Patterns — 5 subtle patterns: dots, grid, diagonal lines, waves, hexagons

Each visual feature can be individually toggled and has its own accent color setting (falls back to the forum's primary color by default).

📦 Installation

Run this in your Flarum root directory:

composer require stezkoy/flarum-time-of-magic
php flarum cache:clear

✨ Update

composer update stezkoy/flarum-time-of-magic
php flarum cache:clear

⚙️ Setup

Open Admin → Extensions → Time of Magic and toggle the features you want. Each feature has its own color and shape/icon options where applicable.

🔗 Links

GitHub Repository · Packagist

📄 License

MIT

ClaudiusH

Nice little touch ups 🪄
Surprised that you implemented the scrollbar via scripting and not simply CSS and an animation timeline. Here's an example:

<div id="ProgressBar"></div>

#ProgressBar {
    position: fixed;
    left: 0;
    top: calc(var(--header-height) - 3px);
    height: 0.5rem;
    width: 100%;
    background-color: var(--timeofmagic-accent-bar);
    transform-origin: 0 0;
    animation: grow-progress auto linear;
    animation-duration: 1ms;
    animation-timeline: --page-scroll;
}

@keyframes grow-progress {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

Stezkoy

ClaudiusH
For the progress bar, I used these sources: SH20RAJ/ScrollProgressJS

Stezkoy

🆕 New Version 1.2.1

⚙️ Add falling leaves and rain effects, validate background pattern, fix color backtotop

composer update stezkoy/flarum-time-of-magic
php flarum cache:clear

Any suggestions on what else to add? 😀

huoxin

Stezkoy just some ideas I had previously
An extension that can enable certain effect within certain time period, e.g. only turn on the snowflakes effects during Christmas time
I think this is something that can be consider in this extension or perhaps in a completely new extension?
(since the extension allow admin to enable effect based on a time they wanted, why not also allow admin to have their own custom effects instead of having you to hardcode them one by one)

just saw your extension for custom CSS also, I think what I suggested above might be more relevant in that extension, but depends on how you want it to be 😂

Forogramero

Stezkoy I'm twerking on my forum and I installed your extension and it's fun.

It would be good if you added an effect for each season of the year (summer, autumn, winter, etc.) and also for universal holidays like Holy Week, Halloween, Christmas, etc.

Stezkoy

huoxin An extension that can enable certain effect within certain time period, e.g. only turn on the snowflakes effects during Christmas time

I'm still thinking about this.

Forogramero added an effect for each season of the year

For example? I just don't know what effect it would have in spring or summer.

Forogramero

Stezkoy Spring: Flowers, smiles, fun... Summer: beach articles, sun.

I talk to the IA and told me this:

ATMOSPHERIC EFFECTS – SEASONS & HOLIDAYS
❄️ WINTER
Snow falling (slow, white flakes)

Frost / icy borders

Light mist/fog at bottom

🌸 SPRING
Cherry blossom petals (floating sideways)

Pollen / fairy dust (tiny gold dots)

Occasional butterflies

☀️ SUMMER
Sea waves at bottom

Sun flare / heat shimmer

Starfish, shells, or confetti falling

Seagulls or balloons floating

🍂 AUTUMN
Dry leaves falling (orange/red/brown, spinning)

Light haze / mist

Slow lazy raindrops

🎄 CHRISTMAS
Snow + colorful twinkling lights

Garland border (flashing LEDs)

🐣 EASTER / HOLY WEEK
Palm leaves falling

Pastel Easter eggs bouncing on click

Purple & white ribbons

🎃 HALLOWEEN
Bats flying (random paths)

Cobwebs in corners

Green ghostly fog

🦃 THANKSGIVING
Corn husks & pumpkins falling

Golden wheat/grain cascade

🎆 NEW YEAR'S EVE
Colorful confetti spinning

Golden sparklers

Floating countdown numbers

💘 VALENTINE'S DAY
Floating pink/red hearts (zigzag)

Cupid's arrows with glow

🍀 ST. PATRICK'S DAY
Four-leaf clovers spinning

Gold coins shimmering

Green rain

⚠️ NON-INTRUSIVE RULES (IMPORTANT!)
Effects must enhance, not distract. Keep them subtle:

Element Opacity Max Particles Speed
Falling particles (snow/leaves/confetti) 0.3 – 0.5 20 Slow
Background waves / haze 0.15 – 0.25 N/A Very slow
Floating elements (balloons/clouds) 0.2 – 0.4 8 Slow
Cursor effects 0.6 – 0.8 1 Normal
Click bursts 0.5 – 0.7 (fades fast) 10 Fades in 1.5s

自在の偶

that's interesting. makes my site a lot of new experiences and fun.

自在の偶

so, Chinese users could enjoy it, now 😀

Stezkoy

🆕 New Version 1.3.0

⚙️ Add schedule planner to auto-enable effects by date/time
🎨 Add new effects: cherry blossom, confetti, floating hearts, four-leaf clovers, Easter eggs, and Chinese New Year lanterns, fireflies
🔧 Refactor forum effects into separate init functions

composer update stezkoy/flarum-time-of-magic
php flarum cache:clear

Forogramero

Stezkoy I'm gonna try them all 😀

Stezkoy

🆕 What's New 1.3.1

🔧Fix: Add tooltips on effect names and density selects in admin effects grid

composer update stezkoy/flarum-time-of-magic
php flarum cache:clear

Stezkoy

🆕 What's New 1.3.2

🆕 Add a switch in user settings (own "Effects" section) so each user can disable falling effects for their account
⚙️ Admins can turn this feature on/off from the admin Effects section and pick where the button shows

composer update stezkoy/flarum-time-of-magic
php flarum cache:clear

DLBB

Just a small suggestion: when the Swap sidebar and content option is turned on, could the layout be fully mirrored? That would mean the item-nav menu is also right-aligned, with the label showing before the icon rather than after.

Stezkoy

DLBB
In that case, it’s better to use CSS.
Previously, @Tutrix proposed the following:

@media (min-width: 992px) {
  .Page-sidebar {
    order: 1;
  }
}

@media (min-width: 992px) {
  .Page-sidebar:not(.Page.DiscussionPage .Page-sidebar) {
    order: 1;
  }
}

Or did I misunderstand?

Tutrix

DLBB
Do you mean something like this?

DLBB

Tutrix more like it but align all to the right.

Tutrix

DLBB

@media (min-width: 992px) {
  .sideNav > ul > li {
    display: flex;
    justify-content: flex-end;
  }
}

and

.LinkButton.hasIcon i,
.TagLinkButton.hasIcon i{
     order: 1;
}

.LinkButton.hasIcon i,
.LinkButton .item-icon {
     order: 1;
}