Shop
Sandli Maurya logoSandli Maurya
Sandli Maurya logoSandli Maurya
Interactive Design Playpen

Creative Experiments & Interactive Prototypes.

A sandbox for testing physical microinteractions, browser-synthesized sounds, variable fonts, and clean motion behaviors.

Interactive animated drawing of eyes that follow the cursor position
Experiment 01

Tactile Audio Deck

Synthesizing physical click and pop sounds using standard Web Audio oscillators. Tap each block to hear custom-modulated feedback mapped to dynamic bounce springs.

Font Weight400
Letter Spacing0px
Line Height1.5
Experiment 02

Typography Morphing

"Visual design is the choreography between empty structures & dynamic micro-expressions."

Experiment 02B: Variable Font Sculptor
I
N
T
E
R
A
C
T
I
O
N

Sweep your cursor across the grid. Proximity acts as a magnetic force, warping weight, optical size, and vertical coordinates while triggering dynamic sound synthesis.

Experiment 03

Tactile sticker Board

Drag and arrange visual assets across the board constraints. Tap to trigger rustling paper feedback, demonstrating organic layering mechanics.

Creative Folder tactile design sticker
Design Star tactile design sticker
Figma Fragment tactile design sticker
Doodle Path tactile design sticker
DRAG & FLING ITEMS
Experiment 04

Spatial Bento Grid

Drag and swap dashboard panels. Watch their frames smoothly swap slots under a spring layout transformation.

Interactive Daisy

HOVER TO SPIN • TAP TO SNAP

Filter Synthesizer

MOVE CURSOR TO MODULATE

Physics Anchors

Palette Matrix

HUE ACCENT330°
SATURATION80%

DRAG ANY PANEL TO SWAP POSITIONS

Experiment 05

3D Paper Peeling

Grab and drag the cover edge of the notebook. Peel it completely open in 3D to uncover the underlying design wireframe blueprints.

CREATIVE NOTEBOOK

Creative Notebook

A stacked 3D blueprint guide mapping coordinates to dynamic React microinteractions.

10 INTERACTIVE PAGESTAP OR DRAG TO OPEN ──→
DESIGN DIARY - EYES MOTION

Designer Notes:

  • Always decouple raw scroll inputs using springs to prevent frame drop on mobile layouts.
  • A custom cursor shouldn't just track—it needs to morph and adapt when hovering over tactile cells.
  • Spring dynamics should have custom stiffness and decay variables relative to physical mass.
DIARY PAGE 1 / 11
FIG 1.0: EYES GEOMETRY FORMULAPAGE 2
d = 100px
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - GRID LAYOUTS

Designer Notes:

  • Organize details in hierarchical blocks (Bento cells) to establish visual weight scanning routes.
  • Framer Motion's layout prop automatically handles scaling and structural interpolation.
  • Limit card scale to avoid clipping bounding grid constraints during drag.
DIARY PAGE 2 / 11
FIG 2.0: SPATIAL BENTO PROPORTIONSPAGE 3
Card A (1x1)Card B (2x1)Card C (1x1)Card D (2x1)
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - TYPOGRAPHY PROXIMITY

Designer Notes:

  • Calculate letter-distance scaling factor in real-time mousemove sweep listeners.
  • Apply high stiffness and medium damping spring settings to letter tiles to prevent sluggish feel.
  • Wrap AudioContext sweeps inside user-triggered events to bypass browser autoplay blocks.
DIARY PAGE 3 / 11
FIG 3.0: TYPOGRAPHY SCULPTOR FIELDPAGE 4
INTCursor Proximity Force
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - VECTOR SCROLLING

Designer Notes:

  • Generate path strings using custom trigonometric expressions linking offset directly.
  • Limit control point displacement to maintain layout boundaries and prevent edge clipping.
  • Use hardware-accelerated SVG renders (Framer Motion useTransform) to bypass CPU overhead.
DIARY PAGE 4 / 11
FIG 4.0: SVG RIBBON CURVE MATHPAGE 5
C1(70, 45)C2(10, 90)
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - WEB AUDIO SYNTHESIS

Designer Notes:

  • Use simple triangle waves for harmonic richness without harsh frequencies.
  • Modulate filter envelopes dynamically based on cursor coordinates for organic sound design.
  • Always ramp gain values exponentially to prevent click pops on oscillator stop.
DIARY PAGE 5 / 11
FIG 5.0: FILTER ENVELOPE SWEEPSPAGE 6
AttackDecaySustainRelease
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - TACTILE PHYSICS

Designer Notes:

  • Use spring calculations for sticker drift to provide visual inertia and drag bounds.
  • Calculate collision velocity to trigger wood clicks or soft pop sounds on boundaries.
  • Decouple render tasks from standard layouts to allow smooth drag behaviors.
DIARY PAGE 6 / 11
FIG 6.0: TACTILE STICKER COORDINATESPAGE 7
Bound constraints: boardConstraintsRefDrag elastic pull
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - CUSTOM CURSORS

Designer Notes:

  • Implement custom cursors using mix-blend-mode difference for readable contrast.
  • Damp cursor coordinate mapping using Framer Motion springs for responsive glide.
  • Toggle cursor visibility to fallback default when screen width is smaller than 768px.
DIARY PAGE 7 / 11
FIG 7.0: CUSTOM CURSOR HOVER STATESPAGE 8
Default dotTactile Hover
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - PORTFOLIO DESIGN

Designer Notes:

  • Emphasize contrast using warm paper matte backgrounds and rich olive tones.
  • Employ Cormorant Garamond serif fonts for headers to evoke classical editorial style.
  • Ensure vertical spacing columns align grid cells symmetrically to keep sections balanced.
DIARY PAGE 8 / 11
FIG 8.0: PORTFOLIO HIERARCHY MAPPAGE 9
Root (Home)/experiments/product
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - PERFORMANCE LAYERS

Designer Notes:

  • Avoid heavy image files in headers; favor vector SVG drawings that scale dynamically.
  • Use React 19's streaming and Server Components when pulling static copy details.
  • Leverage Next.js Turbopack compilation to check bundle sizes during page load.
DIARY PAGE 9 / 11
FIG 9.0: PERFORMANCE OPTIMIZATIONPAGE 10
Performance: 98%Accessibility: 100%
TAP OR DRAG LEFT TO TURNWIRE DATA
DESIGN DIARY - PORTFOLIO COLOPHON

Designer Notes:

  • Handcrafted with React 19, Next.js 16 (Turbopack), and Framer Motion 12.
  • Vectors designed dynamically in SVG; layout styled with vanilla CSS tokens.
  • Synthesized soundscapes built using browser native Web Audio API oscillators.
DIARY PAGE 10 / 11
FIG 10.0: THE SKETCHBOOK SUMMARYPAGE 11
End of Notebook

Interactive Sketchbook study completed. Tap any page on the left or use the FLIP BACK guide to close.

Sandli MauryaAll Pages Rendered
DIARY END - SKETCHBOOK COMPLETE

Designer Notes:

  • Interactive Sketchbook study completed. Tap anywhere on the left side of the spread to flip back.
  • Created with Framer Motion 3D transforms, custom pan mechanics, and spring-damped physics.
  • Check other experiments like Typography Sculptor and Eye Tracking on this page!
DIARY PAGE 11 / 11