INDEX Interactive motion archive

一个特效，
一个世界。

44 个独立网页，各自只研究一种运动。选择一个名词，然后用指针、触摸或滚动亲手把它启动。

浏览实验

CORE EXPERIMENTS

01—06 / 44

Interactive Fluid Distortion

交互式流体扭曲 · POINTER

Full-screen Expansion

全屏扩展转场 · SCROLL

Scroll-driven Scenes

滚动驱动场景切换 · SCROLL

Kinetic Typography

动态排版 · SCROLL

Metaballs / Gooey Effect

融球 / 黏性融合 · POINTER

Image Motion Trail

图像运动拖尾 · POINTER

POINTER · SVG · LAYOUT

轻量交互实验

07—18

Magnetic Cursor

磁吸光标 · POINTER

Fullscreen Crosshair Cursor

全屏十字准星 · POINTER

Direction-Aware Hover Reveal

方向感知悬停揭示 · HOVER

Direction-Aware Marquee

方向感知跑马灯 · HOVER

Tilt Hover / Pointer Parallax

倾斜悬停与指针视差 · POINTER

SVG Path Morphing

SVG 路径形变 · CONTROL

SVG Stroke Drawing

SVG 路径描边 · POINTER

SVG Mask Reveal

SVG 蒙版揭示 · POINTER

CSS Motion Path

CSS 运动路径 · CONTROL

Split-Text Mask Reveal

分割文字蒙版揭示 · CLICK

FLIP Layout Transition

FLIP 布局转场 · CLICK

Shared Element Transition

共享元素视图转场 · CLICK

SCROLL · DRAG · SPACE

空间运动实验

19—26

Infinite Pannable Canvas

无限可平移画布 · DRAG

Inertial Drag

惯性拖拽 · DRAG

Drag-Driven Parallax Carousel

拖拽驱动视差轮播 · DRAG

Vertical-to-Horizontal Scroll

纵向滚动驱动横向轨道 · SCROLL

Parallax Depth Scroll

视差深度滚动 · SCROLL

Layered Zoom Scroll

分层推镜滚动 · SCROLL

On-Scroll 3D Stack Motion

滚动驱动三维卡片堆栈 · SCROLL

SVG Path Morphing on Scroll

滚动驱动 SVG 路径形变 · SCROLL

CANVAS · WEBGL · GPU

计算视觉实验

27—34

Reaction–Diffusion

反应–扩散模拟 · POINTER

SDF Ray Marching

距离场光线步进 · WEBGL

GPU Procedural Particle Field

GPU 程序化粒子流场 · POINTER

WebGL Lens Refraction

WebGL 透镜折射 · POINTER

RGB Shift / Chromatic Aberration

RGB 通道偏移与色差 · POINTER

Afterimage Feedback

残像反馈 · POINTER

Volumetric God Rays

体积光束 · POINTER

3D Morph Targets

三维形态目标动画 · CLICK

DRAG · INERTIA · CONSTRAINTS

物理拖拽实验

35—44

Spring Drag

二阶弹簧跟随拖拽 · SPRING

Elastic Bounds

弹性边界与撞墙回弹 · BOUNCE

Momentum Throw

速度采样与动量投掷 · THROW

Inertial Snap Grid

惯性预测与网格吸附 · SNAP

Magnetic Docking

距离磁力与停靠锁定 · MAGNET

Rope Constraint Drag

绳段长度约束拖拽 · VERLET

Multi-body Collision Drag

多物体碰撞与投掷 · COLLIDE

Orbital Constraint Drag

轨道约束与角动量 · ORBIT

Rubber-band Drag

渐进阻力与橡皮筋回弹 · RESIST

Physics Reorder

弹簧让位式拖拽重排 · REORDER

一个特效，一个世界。