Hover to preview · click to pin
An iOS-style Dynamic Island with eleven activities that collapse and reopen as you switch between them.
26 components, each one a single file you copy into your project. No package to install, no version to keep up with.
Hover to preview · click to pin
An iOS-style Dynamic Island with eleven activities that collapse and reopen as you switch between them.
A row of members that grows on hover, swaps a giant wordmark for the member's name letter by letter, and trails an arrow that points back at the tile.
jswnth/ui
The page waiting underneath.
Ten frames cut past at a fifth of a second each under bright overlaid type, then the whole panel lifts to reveal the page.
jswnth/ui
The page waiting underneath.
Hello in ten languages at three tenths of a second each, then the panel lifts away.
jswnth/ui
The page waiting underneath.
Equal columns clear the screen upward on a ramp — the rightmost snaps away first, the leftmost takes the full three seconds.
jswnth/ui
The page waiting underneath.
Twenty panels in two rows split apart on the same ramp — the top half exits up, the bottom half down.
jswnth/ui
The page waiting underneath.
0%
A ten-box progress track that darkens a box per tenth, spawning tilted info cards into the corners as it climbs past 60, 70 and 80 percent.
jswnth/ui
Images spawn behind the cursor as it moves, cycling through the set and clearing themselves out so at most ten are ever alive.
Scroll inside the frame
A cream board scattered with doodles, where wide image-and-text panels travel a fixed diagonal — in from the bottom right, onto centre stage, then out through the top left.


I'm a web developer in Kuwait City. I write the interface, the motion, and the plumbing underneath — then keep rewriting it until the whole thing feels obvious. Fast pages, honest interactions, and the kind of detail you only notice when it's missing.

The jswnth.com hero: a split-text entrance, a scroll wipe, and draggable stickers, held until the page signals it is ready.
A full-screen opening sequence that deals icons and letters into place before lifting away.
Sites and products built end to end — design, motion, and the code underneath. Each one shipped, each one still standing.

Bilingual storefront with a configurator front and centre — pick a layout, price it, ship it.

A scroll-driven food editorial built on GSAP timelines, where every dish arrives on cue.

Investor-facing site carried by kinetic type and a dark UI that stays legible on a projector.

Sneaker commerce with per-product motion states — each drop gets its own choreography.

The studio index. Next.js and GSAP doing the heavy lifting behind a deceptively calm page.

Desktop accounting dashboard, offline-first, built for people who close books on a plane.
A project index whose headings, rules and rows animate in on scroll through a shared data-attribute convention.
A black opening title that sets one letter at a time, with a draggable reel of cards rising in behind the last of them.
Drag to turn the helix, or scroll over it
Cards wound onto intertwined strands of a vertical helix, turning in real 3D as you drag, with the far side dimmed and blurred behind the near one.
Behind the Designs
Explore more brand identities, packaging, and digital design work in my immersive portfolio.
See more ProjectsStrategy & Planning
Design & Development
Launch & Growth
Ongoing Support
Brand Systems
Strategy & Planning
Design & Development
Launch & Growth
Ongoing Support
Brand Systems
Drag the arc, or focus it and use the arrow keys
A centred hero over an endlessly draggable arc of cards that shrink as they reach the middle and swell toward the edges.
A left drawer that slides out slowly behind a rounded right edge, with links that step aside on hover and an arrow that floods with colour.
Scroll inside the frame
A statement line where black closes in from both edges while a looping arrow retracts its own straight run, dragging the closing words into place.
Scroll inside the frame
A pinned section where numbered cards rise from below the fold one at a time and stack, tilted, over three words of oversized background type.
Scroll inside the frame
A pinned section where images are promoted through three slots on scroll — waiting, centre stage, then out through the corner — each with its own copy alongside.
A macOS-style dock whose icons magnify as the cursor sweeps past them.
Drag or click to send this card back.
Drag or click to send this card back.
Drag or click to send this card back.
Drag or click to send this card back.
A draggable card stack that cycles on click, drag, or a timer.
Move your cursor across the card — the glow tracks it.
Pass any CSS color to tint the spotlight.
A card with a radial glow that follows the pointer across its surface.
A summary of everything happening in the workspace.
A tab bar with a spring-loaded pill that slides between the active item.
Dropped it in and shipped the same day.
The only component set that matched our brand.
Zero runtime surprises, which is the point.
Motion defaults are genuinely tasteful.
Dropped it in and shipped the same day.
The only component set that matched our brand.
Zero runtime surprises, which is the point.
Motion defaults are genuinely tasteful.
An infinite, gap-aware scroller with edge fading and pause on hover.
Build interfaces that feel effortless
A word carousel that rolls through a list without shifting the line around it.
A light sweep across any text, driven entirely by a CSS gradient animation.