Scaler Playground

Pan, zoom, and scroll demos. Use mouse drag to pan, scroll wheel to zoom, or pinch with two fingers.

Image Viewer

Different aspect ratios with Fit/Fill modes. Drag to pan, scroll to zoom, pinch on touch.

100%
Landscape 16:9
img(0,0)img(1600,900)img centerviewport centercontainer: 0×0 | center: on | tx,ty: (0,0)
Image border & center Viewport center Zoom origin (touch/pinch)

Infinite Canvas

Large 3000×2000 grid with cards. Drag to pan, scroll to zoom.

100%
Component A
Service B
Module C
Gateway D
Database E
Cache F
Queue G
Worker H

Card Grid

Service architecture cards. Pan and zoom to explore.

100%
Design System
Colors, typography, spacing tokens
Component Lib
Button, Input, Modal, Toast...
API Gateway
Rate limiting, auth, routing
Auth Service
JWT, OAuth2, sessions
User Service
CRUD, roles, permissions
Notification
Email, push, in-app alerts
Analytics
Events, funnels, dashboards
Storage
S3, CDN, image processing
Search
Full-text, filters, facets
Payments
Stripe, invoices, subscriptions
CI/CD
Build, test, deploy pipelines
Monitoring
Metrics, logs, traces, alerts

WebGL Scene

Scaler drives a WebGL viewport. The transformation matrix is converted to a GL MVP matrix each frame. Pan/zoom with mouse or touch — all rendering happens on the GPU.

100%

Paging / Snap

Horizontal paging with snap. Drag left/right to navigate pages.

Page 1
Swipe horizontally to navigate pages
Page 2
Content snaps to page boundaries
Page 3
Works with momentum scrolling
Page 4
Touch-friendly page transitions
Page 5
Last page — swipe back!