README.md
×
experience.config
>
workspace.open("interactive-web-experiences")
>
creative-engine.init()
✓
>
interaction.enabled = true
#
ITONE DESIGN
DIGITAL EXPERIENCES / REALTIME INTERACTION
INTERACTIVE WEB EXPERIENCES
Websites, die nicht nur betrachtet werden. Sie reagieren, bewegen sich und erzählen Geschichten.
Explore
//
Motion · WebGL · Realtime Shaders
SCROLL TO CONTINUE
##
What we create
Websites sollten sich nicht wie Seiten anfühlen.
Sie sollten sich wie Erlebnisse anfühlen.
Wir verbinden Design, Code, Bewegung und Interaktion zu digitalen
Erfahrungen, die Produkte und Marken nicht nur erklären,
sondern erlebbar machen.
const
capabilities
=
[
"Motion Systems",
"Realtime Shaders",
"3D / WebGL Experiences",
"Interactive Product Showcases"
];
export
class
MotionSystem
{
constructor
() {
this
.purpose =
"guide, explain, react"
;
this
.decoration =
false
;
}
}
itone-code-terminal.svg
×
INTERACTIVE
CODE / MOTION
MOTION SYSTEMS
Bewegung mit Funktion.
Animation hilft, Inhalte zu verstehen. Übergänge schaffen Orientierung. Reaktionen geben einem Interface Persönlichkeit.
TRANSITIONS
ACTIVE
MICRO INTERACTIONS
ACTIVE
SCROLL MOTION
ACTIVE
GENERIC TEMPLATE MOTION
DISABLED
uniform
float
interactionIntensity;
uniform
vec2
pointer;
uniform
float
time;
Don't just show it.
Let people interact with it.
LIVE RENDERER
webgl-experience.preview
LIVE
MOVE · HOLD · CLICK
INTERACTION ENABLED
60 FPS
EXPERIENCE SETTINGS
[ LIVE CONFIGURATION ]
Verändere die Experience selbst.
Die Werte beeinflussen das interaktive Rendering direkt.
MOTION
DENSITY
DISTORTION
CONNECTION RANGE
INTERACTION
ENABLED
POINTER TRACKING
ENABLED
HARDWARE ACCELERATION
AUTO
uniform
sampler2D
logoTexture
;
uniform
vec2
pointer;
uniform
float
refraction;
WEBGL / 3D
Interaktion wird Material.
Echtzeitgrafiken reagieren direkt auf Bewegung und Eingabe. Der Cursor verformt das ITone Design Logo wie eine digitale Oberfläche.
MOVE POINTER
##
Selected work
//
Beispielprojekte für interaktive Produkt- und Markenerlebnisse
▾
selected-work
xpeng-showcase.live
×
LIVE PREVIEW
XPENG SHOWCASE
e-mobility-solutions.com/xpeng/
01
IMAGE PLACEHOLDER
XPENG SHOWCASE
Cinematic automotive product showcase / interactive product experience
LIVE PREVIEW · AUTO SCROLL
1 / 3
>
./start-project.sh
Checking availability...
OK
Creative engine...
READY
>
_