DISSIDE HYDERABAD
LABORATORY // EXPERIMENTAL ENGINE
FPS: 60.0
SCROLL PROGRESS: 0%
// Disside Creative Technology Lab

MAKING THE
INTERNET
EXTRAORDINARY.

We’re an ambitious studio working at the edge of performant, immersive digital scrollytelling experiences. Explore our interactive laboratory experiments, 3D kinetic text matrices, and custom visual shaders.

$ npm install @disside/scrollytelling-motion
Enter Scrollytelling Chamber
SCENE NODES 4,096 PARTICLES
INTERACTION MODE SCRUBBED VELOCITY
FRAME RENDERING HARDWARE ACCELERATED
INSPIRATION MATRIX BASEMENT.STUDIO
CHAPTER 01 // TWISTED 3D TEXT
// PHASE 01: PERSPECTIVE DISTORTION

TWISTED
3D TEXT.

Scroll-velocity mapped typography warping along a 3D Z-axis matrix with real-time perspective distortion.

// PHASE 02: OPTICAL REFRACTION

REFRACTION
& CHROMATIC GLOSS

High-index optical physics rendered at 60 frames per second. Subsurface light bending across dynamic glass surfaces that react to user gestures and scroll position.

// PHASE 03: 3D SPATIAL KINETICS

KINETIC
HOLOGRAPHY.

OBJECT ROTATION: 0.00 RAD
SURFACE METALLIC: 0.98 (IRIDESCENT)
DEPTH BUFFER: ACTIVE (Z-PASS)
// PHASE 04: TOPOLOGICAL TERRAIN

GRID BUMP.

Dynamic mathematical vertex shaders displacing a responsive wireframe grid in sync with page deceleration curves.

01 // TWISTED TYPE 02 // REFRACTION 03 // KINETICS 04 // GRID BUMP
// FROM THE LABORATORY

A Peek into the Bleeding Edge

Disside Lab carves out category leadership by combining intensive creative engineering with surgical aesthetic craft.

EXP // 001 THREE.JS / GSAP
WARPED MATRIX

Twisted 3D Typography Matrix

Real-time quaternion rotational displacement of typography characters driven by cursor acceleration and scroll delta.

AUTHOR: DISSIDE LABS
EXP // 002 GLSL SHADER
REFRACT // 1.52

Subsurface Refraction Lens

Snell’s Law refraction shader computing transmission, chromatic aberration, and roughness dispersion in real time.

AUTHOR: DISSIDE LABS
EXP // 003 KINETIC SVG
MORPH // 60FPS

Morphing Fluid Vector Mesh

Interpolated cubic Bezier paths creating living vector gradients with ultra-low CPU footprint and zero layout thrash.

AUTHOR: DISSIDE LABS
EXP // 004 THREE.JS PBR
SPATIAL CD VINYL

Iridescent 3D Disc Spatial Model

Physically-based rendering (PBR) disc geometry displaying chromatic rainbow reflections and velocity physics.

AUTHOR: DISSIDE LABS
EXP // 005 PERLIN NOISE
PERLIN TERRAIN

Dynamic Topographic Waveform

Multi-octave Simplex & Perlin noise generators creating continuous undulating digital landscapes.

AUTHOR: DISSIDE LABS
EXP // 006 FRAMEWORK
<ScrollyRoot>
<Waypoint at="0.45" />
<Animation ease="power2" />
</ScrollyRoot>

Declarative Scrolly Pipeline

Component-based orchestration pipeline coordinating multi-stage camera timelines with zero render lag.

AUTHOR: DISSIDE LABS View Web Pillar
INTERACTIVE PLAYGROUND

Live Scrollytelling Workbench

Test the scrollytelling scrubbing engine in real time. Drag the playhead to simulate scroll-driven state changes across the 3D canvas.

PLAYHEAD POSITION 50% (FRAME 30/60)
PRESETS:
// GSAP ScrollTrigger Integration
gsap.timeline({ scrollTrigger: { trigger: '#pin-viewport', pin: true, scrub: 1 } })
.to(mesh.rotation, { x: Math.PI * 2, y: Math.PI * 2 })
.to(camera.position, { z: 4.5, ease: 'power2.inOut' }, 0);
BUILD THE FUTURE WITH US

Ready to Build an
Unforgettable Website?

Let’s elevate your brand beyond generic templates into an award-winning, interactive digital scrollytelling experience.