What is a 4D website?

A site whose layout changes along a timeline the visitor controls, usually through scrolling, so time becomes a fourth design dimension alongside space.

Is a 4D website the same as an animated website?

No. Autoplaying animation has time but no control. A 4D site lets the visitor set the pace, pause and reverse.

Are scroll-driven websites accessible?

They can be when every state is readable, nothing depends on reaching the end, and a static layout is provided for visitors who request reduced motion.

The fourth dimension of web design: time, scroll and state in 4D concept websites

1Introduction

A three dimensional scene is a place. A great immersive website is usually something more: a sequence. It reveals, assembles and transforms as the visitor moves through it. That sequence is time, and on the web the visitor holds the controls.

This paper proposes treating time as the fourth dimension of web design and asks what changes when a team designs the timeline as deliberately as the layout.

2Defining a 4D concept website

We define a 4D concept website as one whose spatial composition, in two or three dimensions, changes along a timeline that the visitor controls. The timeline may be driven by scroll position, by playback, or by state such as a selected option. The defining property is that the visitor, not the page, sets the pace, can pause it and can reverse it.

This separates 4D design from autoplaying animation. A carousel that advances on a timer has time but no control. A scroll-driven assembly that reverses when the visitor scrolls back has both.

S(t) = ( x(t), y(t), z(t), state(t) ), t ∈ [0, 1] controlled by the visitor(1)

A 4D section: every spatial property and every state is a function of one visitor-controlled timeline.

3The mathematics of a timeline

Every 4D section reduces to interpolation. Keyframes fix a property at chosen moments, and the value in between is computed from where the visitor is on the timeline. Linear interpolation is the base case; an easing function reshapes local progress so motion starts or settles gently.

Because the visitor controls t, the same function runs forwards and backwards. That reversibility is what separates a 4D section from a one-way animation, and it is why each keyframe must be a readable state rather than a passing frame.

v(t) = a + (b − a) · e( (t − tₐ) / (t_b − tₐ) )(2)

Value between keyframes a and b at times tₐ and t_b, with easing function e.

4The platform: timelines as a web primitive

The Web Animations model describes animations as effects attached to timelines [1]. Scroll-driven animations extend this so that a timeline can be the scroll progress of a container or the progress of an element through the viewport [2]. Together they make the visitor's scroll a native clock for a page, alongside the JavaScript libraries that have long provided the same capability.

5What research says about animated change

Research cautions against assuming motion helps. Tversky and colleagues found animation often no better than static graphics, and proposed that it helps when it is congruent with the change being shown and easy to apprehend [3]. Heer and Robertson found that well designed animated transitions between views of statistical data could improve how people perceive changes, particularly when the transition is staged into simple steps [4].

For 4D web design this suggests a test: the timeline should show a real change, such as a process, an assembly or a before and after, and each step should be simple enough to follow at the visitor's chosen pace.

6Illustrations from iBOY work

On the iBOY homepage, the Behind the Build section pins in place and maps vertical scroll one to one onto a horizontal track of project stages, from planning to launch, with a progress bar filling as the visitor moves. The timeline is congruent with the content, because a project really does move through stages.

The About page uses a WebGL particle scene that changes form as the visitor scrolls, and the CONCEPT and NIO EV sites, both iBOY concept work with fictional businesses, use scroll and state to move from a showcase into detail and then into a simple action.

Video 1. NIO EV, iBOY concept work with a fictional business, recorded from the deployed concept site.

pinnedTrack.ts

typescript

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const track = document.querySelector<HTMLElement>('.track')!;
const distance = () => Math.max(0, track.scrollWidth - document.documentElement.clientWidth);

gsap.to(track, {
  x: () => -distance(),
  ease: 'none', // one to one: scroll position is time
  scrollTrigger: {
    trigger: '.section',
    pin: true,
    scrub: 0.7,
    end: () => `+=${distance()}`,
    invalidateOnRefresh: true,
  },
});

Listing 1. The pattern behind a pinned horizontal track: vertical scroll mapped one to one onto horizontal travel with GSAP ScrollTrigger.

7Principles for 4D design

From the platform, the research and the cases we draw five principles. The timeline must depict a real change. The visitor controls pace and direction. Every state along the timeline is readable on its own. Content and actions never depend on reaching the end. And the timeline collapses into a static, complete layout when reduced motion is requested [5] [6].

Algorithm 1

Designing a 4D section

Input:: A change worth showing: a process, an assembly or a before and after
Output:: A timeline the visitor controls, with a complete static fallback

1Name the change the timeline depicts. If there is none, use a static layout.
2Choose the clock: scroll position, playback or a state such as a selected option.
3Place keyframes at moments that are readable on their own.
4Interpolate every property from the same t so the scene stays coherent.
5Keep content and actions available before the timeline reaches its end.
6Under reduced motion, render the final composition statically.

Key findings

01Time is the fourth dimension: design the timeline as deliberately as the layout.
02Let the visitor control pace and direction, usually through scroll.
03Use the timeline only to show real change, such as a process or an assembly.
04Provide a complete static version for reduced motion.

8Limitations and future work

This is a conceptual paper. The definition and principles are proposed, not validated, and the illustrations are drawn from one studio. Testing comprehension and task completion on 4D sections against static equivalents would be a natural next step.

Questions and answers

What is a 4D website?: A site whose layout changes along a timeline the visitor controls, usually through scrolling, so time becomes a fourth design dimension alongside space.
Is a 4D website the same as an animated website?: No. Autoplaying animation has time but no control. A 4D site lets the visitor set the pace, pause and reverse.
Are scroll-driven websites accessible?: They can be when every state is readable, nothing depends on reaching the end, and a static layout is provided for visitors who request reduced motion.

References

[1]W3C CSS Working Group (2023). Web Animations Level 1. W3C Working Draft. www.w3.org/TR/web-animations-1/
[2]W3C CSS Working Group (2023). Scroll-driven Animations. W3C Working Draft. www.w3.org/TR/scroll-animations-1/
[3]Tversky, B., Morrison, J. B., and Betrancourt, M. (2002). Animation: Can it facilitate?. International Journal of Human-Computer Studies, 57(4), 247 to 262. doi.org/10.1006/ijhc.2002.1017
[4]Heer, J., and Robertson, G. (2007). Animated transitions in statistical data graphics. IEEE Transactions on Visualization and Computer Graphics, 13(6), 1240 to 1247. doi.org/10.1109/TVCG.2007.70539
[5]W3C CSS Working Group (2021). Media Queries Level 5 (prefers-reduced-motion). W3C Working Draft. www.w3.org/TR/mediaqueries-5/
[6]W3C Accessibility Guidelines Working Group (2023). Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation. www.w3.org/TR/WCAG22/

Cite this paper

Jaiganesh D (2026). The fourth dimension of web design: time, scroll and state in 4D concept websites. iBOY Research Notes, Paper 05. https://www.iboyhub.com/blog/the-fourth-dimension-of-web-design-time-scroll-and-state

Projects examined

Jaiganesh D

Founder of iBOY Innovation Hub, a creative technology studio from Tamil Nadu, India, established in 2025. Writes about what the studio learns while designing and building real websites, products and AI systems.