Portfolio
  • 01Home
  • 02Projects
  • 03About
  • 04Skills
  • 05Lab
  • 06Writing
  • 07Contact

© 2026 Hamza Syrage

Playground

Lab

Interactive micro-experiments in motion, spring physics, and interaction design.

Cursor

Arrow Field

A cursor-driven field of arrows using atan2 and vector normalization.

/
Move your cursor
Cursor

Cursor Spotlight

A spring-physics spotlight that follows your cursor with mix-blend-difference inversion.

/
Cursor

Gooey Cursor

A trail of blobs that melt into each other using nothing but blur and contrast.

/
Media

Image Compare

A draggable before/after slider that reveals two images with a clip-path mask.

/
Data

Interactive Chart

A line chart that reveals itself as your cursor sweeps across it.

/
Interaction

Magnetic Button

A button that follows the cursor with spring-based pull.

/
Typography

Marquee Reveal

Hovering a row unclips a scrolling marquee of the same word from the middle outward.

/
Animations

Morphing Shape

Continuous morphing between border-radius values with rotation.

/
Overlays

Nested Views

A settings panel that swaps between sub-views while its height animates to fit.

/
Data

Odometer Counter

A slot-machine style counter where each digit spins independently.

/
Canvas

Particle Constellation

A field of drifting particles that link up into a live network as the cursor moves through.

/
Buttons

Ripple Click

A claret-tinted ripple that expands from the exact point you click.

/

Scroll-driven

Reveal on Scroll

Scroll

Scroll Reveal

Content fades in and slides up as it enters the viewport.

/
Layout

Shuffle Grid

Four brand-colored tiles that continuously reshuffle using layout animation.

/
Navigation

Step Wizard

A directional wizard with animated height, slide transitions, and progress dots.

/
Navigation

Tabs

From a CSS-only segmented control to sliding content panels with animated indicators.

/
Cards

Tilt Card

A card that tilts in 3D with glare and hue shift following the cursor.

/

Move your cursor

Before
After
design
design*design*design*design*design*design*design*design*
motion
motion*motion*motion*motion*motion*motion*motion*motion*
code
code*code*code*code*code*code*code*code*
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

Create account

Set up your email and a secure password to get started.

Home

Browse your feed and updates

Work

Selected projects and case studies

Lab

Interactive UI experiments

Home
Work
Lab
LabHolo Card