Vectorhaus, a digital design studio (recreated Flash site, 2001)

01 SELECTED WORK

NEON DRIFTracing game microsite
PULSE 98.6 FMradio station relaunch
ORBITAL SHOES3D product spinner
STATIC FEST 01festival site with mixer

02 ABOUT US

Vectorhaus is a five-person digital design collective working at the edge of motion, interaction and sound. We believe the web should move. Every pixel is deliberate. Every transition tells a story.

FOUNDED: 1999
KEYFRAMES: 1,204,330
AWARDS: 27
COFFEE: ∞

03 LAB // EXPERIMENTS

Toys we made at 3 a.m. Move your mouse over the field, or press the buttons.

04 NEWS

11.09.01 Vectorhaus v5 is live. Rebuilt from scratch in Flash 5 with ActionScript.
08.21.01 Site of the Day at the Pixel Cup. Third one this year!
06.02.01 Our talk "Kill the Back Button" at the Motion Summit.
03.15.01 New lab toy: magnetic dots. 40 lines of code.

PIXEL CUP
SITE OF
THE DAY

05 CONTACT

SKIP INTRO >> Get VECTOR
PLAYER 5

This site would have been one .swf file made in Macromedia Flash. Here it is rebuilt with HTML, CSS and SVG: no plug-in required.

<div class="vx-stage" id="vx-stage" data-trait="stage" style="--vx-scale: 1">  <div class="vx-preload" data-trait="preloader" aria-hidden="true"> <p class="vx-pix vx-preload__label">LOADING... <span class="vx-preload__pct">0</span>%</p> <div class="vx-preload__bar"><span class="vx-preload__fill"></span></div> <p class="vx-pix vx-preload__kb"><span class="vx-preload__kb-n">0</span> OF 412 KB</p> </div>

<nav class="vx-nav" aria-label="Site sections" data-trait="menu mystery-meat"> <a href="#vx-work" class="vx-nav__btn" data-section="work" aria-label="Work"> <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="8" height="8"/><rect x="13" y="3" width="8" height="8"/><rect x="3" y="13" width="8" height="8"/><rect x="13" y="13" width="8" height="8"/></svg> <span class="vx-nav__label vx-pix">WORK</span> </a> <a href="#vx-about" class="vx-nav__btn" data-section="about" aria-label="About"> <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg> <span class="vx-nav__label vx-pix">ABOUT</span> </a> <a href="#vx-lab" class="vx-nav__btn" data-section="lab" aria-label="Lab"> <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 L22 20 L2 20Z"/></svg> <span class="vx-nav__label vx-pix">LAB</span> </a> <a href="#vx-news" class="vx-nav__btn" data-section="news" aria-label="News"> <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h18M12 3v18M5.5 5.5l13 13M18.5 5.5l-13 13"/></svg> <span class="vx-nav__label vx-pix">NEWS</span> </a> <a href="#vx-contact" class="vx-nav__btn" data-section="contact" aria-label="Contact"> <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="9" width="20" height="6"/><rect x="9" y="2" width="6" height="20"/></svg> <span class="vx-nav__label vx-pix">CONTACT</span> </a> </nav>

function play() { clearTimers() if (reduced || readable()) return showSite(false) vx.dataset.phase = 'preload' const pct = root.querySelector('.vx-preload__pct')! const kb = root.querySelector('.vx-preload__kb-n')! const fill = root.querySelector<HTMLElement>('.vx-preload__fill')! let p = 0 const tick = () => { // Lurch forward like a real 56k download: fast, stall, fast. p = Math.min(100, p + (p > 40 && p < 55 ? 1 : 3 + Math.random() * 5)) pct.textContent = String(Math.floor(p)) kb.textContent = String(Math.floor((p / 100) * 412)) fill.style.width = `${p}%` if (p < 100) later(tick, 70) else later(intro, 250) } tick() }

// Flash's "showAll" scale mode: keep the 760x480 stage whole and scale it to the space available. function scale() { const s = Math.min(1, fit.clientWidth / 760) stage.style.setProperty('--vx-scale', String(s)) fit.style.height = `${Math.ceil(480 * s)}px` }