Flora- Particle JS Website

FLORA is an immersive, Awwwards-inspired digital atelier website that combines art, technology, and interaction into one cinematic digital experience. Its centerpiece is a rose constructed entirely from thousands of animated particles. The rose responds naturally to pointer movement: particles disperse as visitors approach and smoothly return to their original formation afterward. Administrators can replace the rose by uploading another image, which is automatically sampled and reconstructed as an interactive particle artwork.

The public website uses a pitch-black visual foundation, warm white typography, subtle grain, radial lighting, editorial layouts, fine borders, and restrained accent colors. Elegant serif typography is paired with a modern sans-serif to create a refined balance between artistic expression and digital precision. Smooth parallax scrolling, responsive particle fields, orbital geometry, hover-based imagery, and understated transitions connect every section without overwhelming the content.

The complete landing-page journey includes the interactive hero, trust indicators, problem and solution narratives, benefits, capabilities, process, live demonstrations, testimonials, pricing, FAQs, a final call to action, and an editorial footer. Particle animation is used throughout the experience to maintain a consistent visual language while giving every section its own movement, depth, and atmosphere.

Clarity, Momentum, and Resonance each have dedicated detail pages with distinct particle colors, interactive hero sections, transformation statements, supporting principles, and navigation to the next experience. Their corresponding landing-page rows reveal relevant artwork only when hovered or keyboard-focused, keeping the default layout subtle and uncluttered.

A hidden visual CMS is available exclusively through the `/admin` route and is never exposed through the public navigation. Authentication protects the editor, with a secure first-time password setup and session-based access. Inside the CMS, administrators can select every existing page, switch between desktop and mobile previews, click visible text directly within the preview, edit it, and save the result.

The CMS also supports custom page creation, image replacement, particle-image conversion, global settings, branding, contact details, navigation labels, footer content, copyright information, and media management. Uploaded PNG, JPG, and WebP files can replace the original rose or supporting artwork while preserving the website’s interactive particle behavior.

FLORA is designed to feel less like a conventional agency website and more like a living visual system—responsive, expressive, modern, and continuously transformable through its integrated CMS.

The system solves the problem of generic, static websites that fail to capture attention or communicate a memorable brand identity. It combines interactive particle visuals, immersive storytelling, responsive design, and an easy-to-use visual CMS, enabling businesses to deliver a distinctive digital experience while independently updating content, images, pages, branding, and particle formations without modifying code.