Sixspeedmedia.com was my brand for freelance web-design projects and the Flash-based interactive portfolio website created between 2002–2003 as my graduation project at the Art Institute of Seattle. The site introduced foundational innovations in interactive web design, including dynamic, data-driven carousel navigation, realistic physics-based scrolling with inertia and friction (the DiffX inertia method, evolved from earlier Director-based demos), real-time visual effects, and scalable UI techniques. These features remain fully accessible and live to try, and many are now considered standard components of modern kinetic user interfaces. The original implementation has been continuously live and fully operational since early 2003, hosted under ayeckel.com after a domain name swap from sixspeedmedia.com, running continuously on the same server instance for over two decades.

Technical Details & Innovations

Elliptical Carousel Navigation

One core innovation of Sixspeedmedia.com was the elliptical carousel navigation. UI elements were dynamically positioned using ellipse mathematics, creating an intuitive, space-efficient navigation system that dynamically scales to accommodate varying amounts of content.

The second, and slightly less glamorous 2D flat carousel acted as the second tier of a hierarchical data-bound set of nested carousels. Additionally, the second-tier image/media/content area can contain a third tier for an image or content carousel.

This shifts the focus from one specific carousel to a nested carousel model. The second-tier flat carousel is skinnable; Sixspeedmedia shows a film strip for photos, printer paper for print work, and a circuit board photo from my PC at the time. These dynamic, data-driven hierarchical carousels became a staple element of my designs.

The 2D carousel, along with inertia, has a mini-nav (with very small icons or squares/circles in some prototypes) next to it showing the crop area; the mini-nav moves in parallax to give a sense of off-screen content. These 2D carousels do not loop like the 3D version. They simply slow down towards the edge by using the mouse formula to ease into the edge.

Physics-Based Interactions (DiffX Method)

Sixspeedmedia.com was the first known web interface to implement realistic physics-based scrolling, employing the original DiffX inertia method. This method calculates motion based on differences between mouse positions captured at precise intervals, applying decay (friction) for natural-feeling movement:

// Original DiffX inertia method (ActionScript, 2003)
function moveClipAroundCircle(theClip) {
    theClip.then = theClip.now;
    theClip.now = getTimer();
    var elapsed = theClip.now - theClip.then;
    var numSeconds = elapsed / 1000;

    mouseX = (_xmouse - 500) * _root.speed;

    if (_xmouse < 100) mouseX /= 20;
    else if (_xmouse > 1000) mouseX /= (_xmouse / (_xmouse / 3));
    if (_xmouse > 900 || _ymouse < 1) mouseX = 10;

    var degreeIncrement = mouseX * numSeconds;
    theClip.theta += degreeIncrement;
    theClip.theta %= 360;

    var radians = degreesToRadians(theClip.theta);
    var xOnEllipse = theClip.ellipseWidth * (Math.cos(radians) * theClip.radius);
    var yOnEllipse = theClip.ellipseHeight * (Math.sin(radians) * theClip.radius);

    var rotationRadian = degreesToRadians(theClip.rotationTheta);
    var rotatedX = xOnEllipse * Math.cos(rotationRadian) - yOnEllipse * Math.sin(rotationRadian);
    var rotatedY = xOnEllipse * Math.sin(rotationRadian) + yOnEllipse * Math.cos(rotationRadian);

    theClip._x = theClip.centerX + rotatedX;
    theClip._y = theClip.centerY - rotatedY;
}

Data-Driven Modular Content (XML)

Content was dynamically loaded from external XML data files, making updates straightforward without recompiling the Flash file. This modular architecture anticipated current content management practices.

Real-Time Visual Effects

The interface utilized experimental RGB-channel shifts and blur transitions to provide engaging visual feedback. These effects were accomplished in real-time without external plugins, pushing the limits of Flash's capabilities at that time.

Scalable UI Techniques

Scalable layouts using single-pixel-stretching and layered vector graphics allowed the UI to adapt fluidly to various resolutions and screen sizes before contemporary responsive design techniques.

Historical Timeline

• May 2002: Initial interactive concept documented (Data-driven UI).
• August 2002: Domain registration (sixspeedmedia.com).
• Late 2002: First elliptical carousel prototypes created, using early DiffX inertia methods.
• January 2003: Site publicly accessible, initial inertia implementation active.
• March 2003 (v0.8): Comprehensive implementation of elliptical carousel, RGB transitions, modular data-driven XML content.
• October 2003: Experimental mobile WML version released, demonstrating early cross-platform thinking.

Continued Availability & Modern Performance

Uniquely, Sixspeedmedia.com remains continuously live and fully operational since its initial launch in 2003, currently hosted at ayeckel.com/student-portfolio/index1.html. It performs exceptionally well on contemporary devices, running smoothly at approximately 100 FPS with touch interactions fully supported, exactly as originally designed.

Historical Documentation and Original Sources

The complete and detailed technical documentation, including version history, code samples, and original specifications, is available to verify authenticity and historical accuracy:

• Sixspeedmedia.com Original Development Documentation (2002–2003, PDF)

Influence and Lineage

The methods first demonstrated on Sixspeedmedia.com directly influenced later development efforts in interactive and multi-touch UI design, including the Silverlight/WPF-based multi-touch experiments. The inertia methods from Sixspeedmedia's DiffX technique evolved directly into gesture-processing library licensed and adopted by Microsoft's Windows Presentation Foundation (WPF) multi-touch Manipulation Processor. This complete lineage, is verifiable through preserved documents and continuous hosting of the original site on the same serve, establishes Sixspeedmedia.com's significant place within the historical evolution of kinetic and interactive user interfaces. Pointer method, gesture processing and easing document and source code for Car Game 2001, SixSpeedMedia 2003, SlideView 2009—the full original Silverlight gesture library and source code is at the end of the doument if you are curious how it all works at the code level