Loading…

Experience library

Choose how the website should feel.

These are distinct interaction systems — not color swaps. Preview every direction before you use it.

Spatial product story / WebGL01 / experience system

A website you can move around inside.

Real-time 3D, restrained typography and spatial interaction for launches, studios and product stories.

01
Spatial premise

The object is part of the navigation.

A real-time scene anchors the page while type and interface remain deliberately restrained.

Views

Three angles. One product story.

Rotate

Form

Introduce silhouette and proportion before detail.

Inspect

Material

Bring surface, reflection and finish into focus.

Reveal

System

Connect the object to the larger product or brand idea.

Scroll choreography

Move from curiosity to understanding.

01

Approach

The scene establishes scale and atmosphere.

02

Orbit

Motion reveals details without stealing control.

03

Land

The story resolves into a clear action.

Runtime

Cinematic without becoming a demo reel.

60fps

targeted motion budget

1

primary WebGL scene

0

autoplay video required

Launch

Give the product a world of its own.

Replace the placeholder form with your object, image or product direction in Studio.

Orbit ObjectsDesigned with SiteForge© 2026
Preview
3D Experience

Orbit Objects

Real-time 3D, restrained typography and spatial interaction for launches, studios and product stories.

Editorial / layered scroll01 / experience system

Stories gain depth when the page moves at more than one speed.

A layered editorial system for travel, hospitality, culture and long-form brand storytelling.

Field notes

Images and words travel at different speeds.

Layer 01

Coast road

A slow-moving image plane holds the atmosphere.

Layer 02

House light

Editorial copy advances faster to create depth.

Layer 03

Local table

Foreground detail arrives last and sharpest.

02
Pace

Scroll becomes a camera move.

The page uses depth cues sparingly so reading remains primary while the environment feels dimensional.

Layers

Background, content, foreground.

01

Atmosphere

Large slow fields establish place.

02

Narrative

Readable content keeps a normal rhythm.

03

Detail

Closer elements react a little faster.

Motion budget

Depth without dizziness.

3

maximum depth planes

1×

normal reading speed

Reduced

motion fallback

Destination

Make the scroll feel like arriving.

Best for hospitality, travel, editorial portfolios and place-led brands.

Drift JournalDesigned with SiteForge© 2026
Preview
Parallax Scroll

Drift Journal

A layered editorial system for travel, hospitality, culture and long-form brand storytelling.

Narrative system / Scroll-linked01 / experience system

One argument, revealed chapter by chapter.

Sticky narrative scenes and paced content for reports, launches, case studies and mission-driven products.

01
Chapter 01

Establish the question before showing the answer.

A sticky narrative scene keeps the argument legible while the visual state changes around it.

Chapter 02

Turn evidence into moments.

01

problem framed

03

proof points revealed

01

clear conclusion

Chapter 03

Let each proof point own the screen.

A

Signal

One idea per scene keeps the pace controlled.

B

Shift

Visual state changes mark narrative progress.

C

Resolve

The final section converts understanding into action.

Chapter 04

Structure the story like an edit.

01

Context

What does the visitor need to understand first?

02

Tension

What changes their interpretation?

03

Action

What should they do once convinced?

Final frame

End with one decision.

A strong scrollytelling page should feel complete before the call to action appears.

Preview
Scrollytelling

Chapter One

Sticky narrative scenes and paced content for reports, launches, case studies and mission-driven products.

Architecture / spatial layers01 / experience system

Foreground. Midground. Meaning.

A depth-led portfolio where panels, shadows and spatial transitions create a tactile sense of place.

01
Spatial system

Every plane has a job.

Foreground panels, midground content and a slow environmental layer create architectural depth.

Projects

Work presented as stacked spatial scenes.

Near plane

Residence 04

Warm stone and shadow.

Mid plane

Hotel N

A sequence of framed views.

Far plane

Gallery 2

Light as the final material.

Composition

Build depth from hierarchy first.

01

Anchor

One dominant content plane.

02

Offset

Secondary cards step in physical-feeling layers.

03

Atmosphere

A distant field supports rather than competes.

Depth cues

Subtle enough to remain premium.

3

z-levels

Soft

shadow language

Slow

parallax response

Commission

Turn flat pages into spaces.

Use for architecture, interiors, luxury and portfolio work where composition carries value.

Preview
Layer Depth

Strata Studio

A depth-led portfolio where panels, shadows and spatial transitions create a tactile sense of place.

Software / translucent interface01 / experience system

Complex systems, made lighter than air.

Translucent layers, luminous borders and calm data surfaces for software and AI products.

Control surface

Dense information, visually lighter.

01

Observe

Layer live status without turning the screen into a dashboard wall.

02

Act

Keep primary operations clearly above translucent context.

03

Trace

Use depth to show relationship between system layers.

Signal

Clarity through depth.

Live

system state

Scoped

permissions

Layered

context

Modules

Panels feel related without becoming flat.

Front

Command

Primary action plane.

Middle

Context

Supporting information layer.

Back

Atmosphere

Ambient system state.

Interface rules

Glass only works when hierarchy is stronger than the effect.

Contrast?

Text and controls stay on opaque-enough surfaces.

Motion?

Background movement remains slow and nonessential.

Mobile?

Blur and layer count reduce on smaller devices.

System

Make complexity feel composed.

Use the glass system selectively around real product hierarchy.

Preview
Glassmorphism

Glassline OS

Translucent layers, luminous borders and calm data surfaces for software and AI products.

Craft / tactile digital objects01 / experience system

Digital controls that feel like they belong to something real.

Soft relief, material surfaces and physical affordances for craft, audio, lifestyle and boutique products.

Controls

Digital objects with physical logic.

01

Press

Buttons have clear resting and active states.

02

Turn

Controls can imply dials, sliders and stepped values.

03

Rest

Panels feel embedded in a material surface.

Objects

Interface pieces that feel made, not drawn.

Knob

Tone

A tactile audio control.

Toggle

Level

A soft-routed utility switch.

Tray

Archive

A recessed content drawer.

03
Materiality

Relief replaces unnecessary animation.

Soft shadows and pressed states create feedback without turning every interaction into motion.

Rules

Tactility still needs restraint.

Accessibility?

State is never communicated by shadow alone.

Mobile?

Targets stay large and obvious.

Performance?

Most effects are CSS rather than heavy media.

Make it tangible

Give software a material personality.

Strong for audio, craft, lifestyle tools and focused product experiences.

Preview
Skeuomorphism

Tactile Works

Soft relief, material surfaces and physical affordances for craft, audio, lifestyle and boutique products.

Commerce / editorial catalog24 / products live

Products deserve a point of view, not just a grid.

A conversion-ready storefront direction with editorial merchandising, product cards and campaign rhythm.

New collection

Merchandising with editorial rhythm.

€240

Arc Lamp

Directional light in brushed aluminum.

€390

Fold Chair

Powder-coated steel with woven seat.

€95

Loop Tray

Cast aluminum for desk or table.

Shop by story

Collections before categories.

01

Living

Objects for shared rooms and long evenings.

02

Working

Useful tools that reduce visual noise.

03

Giving

Smaller pieces with considered packaging.

03
Material note

Products deserve context, not just thumbnails.

Editorial modules, product cards and campaign moments can coexist without sacrificing conversion.

Service

The practical questions are easy to find.

Shipping

Show region-specific delivery information clearly.

Returns

Keep policy details close to purchase decisions.

Trade

Give professional buyers a separate route.

Collection 01

Build a storefront with a point of view.

Use SiteForge for the brand and storefront experience, then connect commerce infrastructure as the product matures.

Preview
E-commerce

Mercantile

A conversion-ready storefront direction with editorial merchandising, product cards and campaign rhythm.

Archive / continuous browse01 / experience system

An index with no obvious edge.

Continuous rails, looping marquees and dense browsing for portfolios, image archives and cultural collections.

Loop Archive — Infinite Scroll — Loop Archive — Infinite Scroll — Loop Archive — Infinite Scroll — Loop Archive — Infinite Scroll —
Continuous index

Browse without a hard beginning or end.

2026

Work 001

Identity / Culture

2025

Work 002

Digital / Fashion

2026

Work 003

Campaign / Music

Browse modes

Rails, loops and dense indices.

01

Loop

Repeated content rails create continuous motion.

02

Filter

Category changes do not break the browsing rhythm.

03

Inspect

Hover or focus reveals project detail.

Archive

Designed for volume.

100+

projects supported

∞

visual loop

Fast

scan pattern

04
Navigation

Repetition becomes orientation.

The user always sees enough of the next item to understand the browsing model.

Index

Build an archive people want to wander through.

Best for studios, photographers, fashion and culture-heavy portfolios.

Preview
Infinite Scroll

Loop Archive

Continuous rails, looping marquees and dense browsing for portfolios, image archives and cultural collections.

AI / ambient gradient field01 / experience system

The interface is calm. The atmosphere is alive.

Slow background motion, luminous gradients and focused content for modern AI and infrastructure products.

01
Atmosphere

The background moves. The interface stays calm.

Slow gradient fields create a living environment without asking the user to chase the motion.

System

Motion that communicates state.

01

Idle

Low-energy drift sets the tone.

02

Active

Color and luminance can reflect product status.

03

Focus

Content surfaces remain stable and readable.

Energy

Always moving, never urgent.

12s

ambient cycle

Low

motion amplitude

0

required interaction

Use cases

Atmosphere around credible product content.

Live

AI infrastructure

Signal a responsive system.

Flow

Creative tools

Give the workspace character.

Field

Research

Support depth without decoration.

Field

Give the product a quiet pulse.

Ambient motion works best when it stays behind the information.

Preview
Ambient Motion

Aurora Field

Slow background motion, luminous gradients and focused content for modern AI and infrastructure products.

Creative / responsive cursor01 / experience system

Every surface reacts with intention.

Magnetic buttons, tilt cards and responsive micro-interactions for agencies, studios and experimental portfolios.

Interactive index

Every project reveals something on approach.

Hover

Brand system

Card tilt exposes secondary metadata.

Magnet

Digital launch

Cursor proximity shifts the composition.

Reveal

Campaign

Image and type trade emphasis.

Micro-interactions

Feedback before navigation.

01

Magnetic

Primary actions lean toward the cursor.

02

Tilt

Cards respond with restrained perspective.

03

Reveal

Details appear when interest is expressed.

03
Principle

Hover should answer “what happens if I click?”

Interaction previews meaning rather than adding random movement.

Response

Fast enough to feel direct.

180ms

target feedback

2°

typical tilt

Touch

fallback states

Explore

Make the portfolio respond to curiosity.

Strong for agencies, studios, creative technology and experimental product work.

Preview
Hover Interaction

Magnet Studio

Magnetic buttons, tilt cards and responsive micro-interactions for agencies, studios and experimental portfolios.

Culture / type in motion01 / experience system

TYPE SHOULD MOVE LIKE IT MEANS IT.

Overscale lettering, animated emphasis and typographic rhythm for music, events, campaigns and expressive brands.

01
Type / 01

Meaning changes when language has tempo.

Overscale words, staggered reveals and moving emphasis create rhythm without needing decorative imagery.

Type / 02

Campaign lines become visual scenes.

Display

LOUD

Use scale for declarations.

Detail

soft

Use contrast for intimacy.

Loop

again

Use repetition for memory.

Type / 03

Typography becomes the image system.

01

display family

03

motion behaviors

∞

language variations

Type / 04

Movement follows semantics.

01

Emphasize

Weight and scale reinforce meaning.

02

Sequence

Words enter in deliberate order.

03

Pause

Stillness creates contrast.

Type / 05

Write something worth animating.

Start with the message. Let SiteForge turn the hierarchy into movement.

Preview
Kinetic Typography

Typewave

Overscale lettering, animated emphasis and typographic rhythm for music, events, campaigns and expressive brands.

Product launch / scroll-driven 3D01 / experience system

Scroll to rotate the idea.

A cinematic launch system where 3D form, typography and sections evolve together as the page advances.

01
Spatial premise

The object is part of the navigation.

A real-time scene anchors the page while type and interface remain deliberately restrained.

Views

Three angles. One product story.

Rotate

Form

Introduce silhouette and proportion before detail.

Inspect

Material

Bring surface, reflection and finish into focus.

Reveal

System

Connect the object to the larger product or brand idea.

Scroll choreography

Move from curiosity to understanding.

01

Approach

The scene establishes scale and atmosphere.

02

Orbit

Motion reveals details without stealing control.

03

Land

The story resolves into a clear action.

Runtime

Cinematic without becoming a demo reel.

60fps

targeted motion budget

1

primary WebGL scene

0

autoplay video required

Launch

Give the product a world of its own.

Replace the placeholder form with your object, image or product direction in Studio.

Preview
3D Scroll Animation

Axis Motion

A cinematic launch system where 3D form, typography and sections evolve together as the page advances.