Craft & Behaviours
Work in Motion.
Bloom's work is expressed through a set of refined, vanilla JavaScript modules designed to elevate navigation and atmospheric immersion.
This showcase breaks down each interactive layer in detail — showing how they work together as a cohesive front-end system.
Module 01
Preloader & Toast Arrival.
When a visitor lands on Bloom, a brand preloader overlay presents the Bloom logo before being completely removed from the DOM after 1.5 seconds.
Shortly after arrival, a floating toast appears at the bottom of the screen with a welcoming status message, automatically fading out after 4 seconds to leave the workspace pristine.
Module 02
Sticky Header & Scroll Fill.
As you scroll past 80 pixels, the navigation bar gains a frosted glass background state (`rt-stuck`) and sticky positioning.
At the very top of the viewport, a hairline progress fill bar continuously calculates scroll percentage, giving readers an immediate sense of page depth.
Module 03
Dynamic Hero Typewriter.
The main headline cycles continuously through three core brand promises using a custom typewriter loop written in lightweight JavaScript.
Live Phrase Rotation
"A calmer kind of motion." → "The same Bloom, more alive." → "Restraint, made interactive."
Module 04
150 Floating Particles & Globe Parallax.
Behind the hero text sits a field of 150 dynamically injected particle elements (`rt-particle`) drifting gracefully across various depths.
Simultaneously, the 3D glowing glass globe container moves on a separate scroll transform axis, creating an organic sense of three-dimensional depth.
Module 05
Stats Counter, Accordion & Tabs.
Four statistical counters animate smoothly from zero to their target numbers when scrolled into view. FAQ items expand and update aria attributes seamlessly.
Animated Counters
Counts smoothly upon intersection trigger.
Accordion FAQ
Accessible aria-expanded toggle state.
3-Tab Switcher
Swaps content panels without page reloads.
Module 06
Auto-advancing Carousel & Lazy Gallery.
Below is a live demonstration of Bloom's 5-slide auto-advancing carousel, paired with gallery imagery lazy-loaded on scroll.
Slide 01
Calm Brand Typography
Poppins medium headings paired with Source Serif 4 italic accents.
Slide 02
Liquid Glassmorphism
Dual tier backdrop blur with subtle linear gradient borders.
Slide 03
Vanilla JavaScript Mechanics
Zero external script bloat for ultra-fast response times.
Slide 04
Accessible Interaction
Proper ARIA roles, states, and keyboard-friendly controls.
Slide 05
Multi-Page Continuity
Consistent navigation, styling, and tone across all five pages.
Lazy Gallery Showcase
