fluxspaceconcept
a concept for fluxspace.io · website redesign brainstorm

a website
that feels like
walking in.

When someone walks into a Fluxspace experience center, they feel it — the warm light, the hum, kids deep in flow. The site they visit before they ever arrive is a flat brochure. This page explores what it would take to close that gap: how the website itself can deliver the same awe — through ambient film, spatial scroll, WebGL, generative AI, and a dozen other techniques the top 1% of the web are shipping right now.

ambient filmspatial scrollwebglview transitionsgenerative aimatterportmagnetic cursorspatial audiolive datapersonalizationscroll-driven csswebgpuambient filmspatial scrollwebglview transitionsgenerative aimatterportmagnetic cursorspatial audiolive datapersonalizationscroll-driven csswebgpu
0:00 · what the homepage opens with

The first frame is not a photo.

It's a 10-second ambient loop of an actual classroom in flow. No headline overlay, no buttons fighting for attention. The visitor lands and the site is already breathing. That's the trade we want: marketing copy → mood, before a single word is read.

02 · the translation

Four moments from the visit — rebuilt in the browser.

Every sensory beat of walking into a Fluxspace has a web equivalent in 2026. Not a metaphor — an actual capability shipping in browsers today.

  1. The door opens
    moment i
    The door opens

    Warm light, the hum of 3D printers, a wall of student work catching your eye.

    on the new site

    Ambient 4K hero film + WebGL particle field that reacts to the cursor. No stock photography, ever.

  2. You start walking
    moment ii
    You start walking

    Your guide doesn't lecture — they let the rooms do the talking. You move through space.

    on the new site

    Scroll-driven spatial storytelling. Every scroll inch is a step deeper, with parallax depth and native CSS scroll-timeline reveals.

  3. Something catches your hand
    moment iii
    Something catches your hand

    You pick up a micro:bit. You touch the lettuce. The experience becomes tactile.

    on the new site

    Magnetic cursor, spatial audio on hover, View Transitions that morph a thumbnail into a full case study. The page responds to you.

  4. You see it for your school
    moment iv
    You see it for your school

    Our director sketches your gym on a whiteboard and shows what's possible.

    on the new site

    Generative room previews. Upload your floor plan → AI render of a Fluxspace in your building in under 60 seconds.

03 · the toolkit

Fifteen techniques the top 1% of the web are shipping right now.

Each one is in production at a site you've probably visited this week. Every one of them is buildable for fluxspace.io. None are on it today.

01Sight

Ambient hero film

10-second 4K loop of an actual classroom in flow. Replaces the static photo. The first thing visitors see is movement, not marketing copy.

seen on · Apple, Linear, Vercel launches
02Sight

WebGL particle field

A live canvas behind the wordmark. Cursor-reactive flux lines, brand-coded, runs at 60fps on a Chromebook.

seen on · Stripe Sessions, Cosmos.so
03Motion

Spatial scrollytelling

The page is a guided walk. Each scroll inch = a step forward, with parallax depth and anchored captions that pin as the visual moves.

seen on · NYT Snowfall, Apple Vision Pro
04Motion

Scroll-driven CSS animations

animation-timeline: view() — native browser scroll animations. No IntersectionObserver, no JS framework tax. Ships today in Chromium.

seen on · Chrome team, web.dev
05Motion

View Transitions API

A room thumbnail morphs into the full case study with one CSS line. Native cross-page animation, no layout shift, no JS animation libs.

seen on · GitHub, Astro, every modern docs site
06Touch

Magnetic custom cursor

A teal dot follows you and latches onto interactive elements. Tiny. Tells visitors a human cared about every pixel.

seen on · Awwwards SOTD shortlist
07Sound

Hover spatial audio

Hover the Makerspace card — hear filament extruding. Hover Indoor Ag — hear water trickling. The web finally has a soundtrack.

seen on · Maxon, Stripe Atlas
08AI

Conversational hero (LLM)

Replace the search bar with “Ask Fluxy anything.” A principal types ‘grant funding for rural makerspaces’ and lands on the exact page + a generated answer.

seen on · Vercel, Anthropic, Notion AI
09AI

Generative room previews

Upload your school floor plan → diffusion model renders a Fluxspace in 30 seconds. The single biggest ‘holy crap’ moment we can ship.

seen on · Spline AI, Krea, Runway
103D

WebGPU 3D dollhouse

An inline, rotatable 3D model of each experience center. Click a room, fly the camera in. Replaces the photo gallery entirely.

seen on · Bruno Simon, Three.js Journey
113D

Matterport walkthrough

A real captured 360° walkthrough of Norristown, embedded above the fold. The closest thing to actually being there.

seen on · Real-estate, Igloo Vision case studies
12Proof

Live data widgets

Real-time counter: students reached this week, prints completed today, lbs of lettuce harvested. Pulled from a private API on visit.

seen on · GitHub status, Cloudflare radar
13AI

Personalized landing per district

URL or referrer detection rewrites the hero copy for the visitor's district. ‘Welcome, Lower Merion.’ Tiny touch, huge psychological lift.

seen on · Mutiny, Segment, Default
14Craft

Editable in-place case studies

MDX-driven story pages so your team ships a case study like writing a doc. No Webflow CMS gymnastics, no dev request queue.

seen on · Linear Changelog, Stripe Press
15Craft

View source as a brand moment

Right-click → View Page Source opens an ASCII-art Fluxspace logo and a recruiting note. Every senior dev who lands sees it.

seen on · GitHub, Linear, Cloudflare
04 · live proof

Numbers that update while you read.

0+
students through our centers
0
school partnerships
0 ft²
of learning environment transformed
0 lbs
lettuce harvested last semester

Pulled live from a private API, refreshed every visit. Today the site has zero numeric proof. A counter ticking up as a visitor reads is a small component and a permanent trust upgrade.

05 · the audit

What the current fluxspace.io doesn't yet make people feel.

A deep read of every public page. Findings are specific — each one maps to a section, a piece of copy, or a measurable behaviour we observed.