Skip to content
jjswnth/ui

Components

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.

jswnth-ui

Members Hover

NewMotion

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

Components that feel effortless

The page waiting underneath.

jswnth-ui
01 / 10

Nike Preloader

NewPreloader

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

Components that feel effortless

The page waiting underneath.

Hello

Words Preloader

NewPreloader

Hello in ten languages at three tenths of a second each, then the panel lifts away.

jswnth/ui

Components that feel effortless

The page waiting underneath.

jswnth-ui

Stairs Preloader

NewPreloader

Equal columns clear the screen upward on a ramp — the rightmost snaps away first, the leftmost takes the full three seconds.

jswnth/ui

Components that feel effortless

The page waiting underneath.

jswnth-ui

Twenty panels in two rows split apart on the same ramp — the top half exits up, the bottom half down.

jswnth/ui

Components that feel effortless

The page waiting underneath.

LOADER

0%

Box Loader

NewPreloader

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

Move your cursor

Images spawn behind the cursor as it moves, cycling through the set and clearing themselves out so at most ten are ever alive.

Start with the awkward questions

01 — Discovery

Start with the awkward questions

Before a single pixel, we work out what the thing is actually for and who it has to convince.

Pick a direction and commit

02 — Direction

Pick a direction and commit

One route, argued for properly, beats three safe ones presented side by side.

Make it real early

03 — Build

Make it real early

Interfaces get judged in a browser, not a canvas, so that is where we take them.

Leave something maintainable

04 — Handover

Leave something maintainable

Tokens, components, and notes that mean the next person does not start over.

Scroll inside the frame

Sketchboard

NewSection

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.

Full Stack Developerjswnth.com

Portfolio’26

Say hi!

Hi! I’m Jaswanth

  • Web Developer · Kuwait
  • Full Stack Developer
  • Frontend Engineer
  • Motion & Interaction
  • 3D / Blender
  • Creative Coder
N° 01’26
jswnth2026
React
Astro
Three.js
GSAP
TypeScript
Blender
What’s Up

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.

Fig. 01The view from here
drag the bits around
Scroll

Hero

NewSection

The jswnth.com hero: a split-text entrance, a scroll wipe, and draggable stickers, held until the page signals it is ready.

J
a
s
w
a
n
t
h

Loader

NewPreloader

A full-screen opening sequence that deals icons and letters into place before lifting away.

02 // Selected WorkSix of them

Work

Sites and products built end to end — design, motion, and the code underneath. Each one shipped, each one still standing.

2023 — 2026Scroll
01 / 06

Dream SoftPlay

2025
Dream SoftPlay — site
jswnth202501Par Avion
01Dream SoftPlay2025

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

  • Next.js
  • Commerce
  • i18n
02 / 06

Morni

2025
Morni — site
jswnth202502Par Avion
02Morni2025

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

  • GSAP
  • Editorial
  • Motion
03 / 06

Orbit

2024
Orbit — site
jswnth202403Par Avion
03Orbit2024

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

  • Astro
  • Type
  • Dark UI
04 / 06

Sands & Souls

2024
Sands & Souls — site
jswnth202404Par Avion
04Sands & Souls2024

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

  • React
  • Three.js
  • Commerce
05 / 06

Kinematic Studio

2024
Kinematic Studio — site
jswnth202405Par Avion
05Kinematic Studio2024

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

  • Next.js
  • GSAP
  • Framer
06 / 06

Kerna

2023
Kerna — site
jswnth202306Par Avion
06Kerna2023

Desktop accounting dashboard, offline-first, built for people who close books on a plane.

  • Electron
  • Offline
  • Data

Work Index

NewSection

A project index whose headings, rules and rows animate in on scroll through a shared data-attribute convention.

jswnth/ui

Headline Reel

NewSection

A black opening title that sets one letter at a time, with a draggable reel of cards rising in behind the last of them.

Frame 01
Frame 01
Frame 02
Frame 02
Frame 03
Frame 03
Frame 04
Frame 04
Frame 05
Frame 05
Frame 06
Frame 06
Frame 07
Frame 07
Frame 08
Frame 08
Frame 09
Frame 09
Frame 10
Frame 10
Frame 01
Frame 01
Frame 02
Frame 02
Frame 03
Frame 03
Frame 04
Frame 04
Frame 05
Frame 05
Frame 06
Frame 06
Frame 07
Frame 07
Frame 08
Frame 08
Frame 09
Frame 09
Frame 10
Frame 10

Drag to turn the helix, or scroll over it

Helix Gallery

NewMotion

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

Curious What Else I've Created?

Explore more brand identities, packaging, and digital design work in my immersive portfolio.

See more Projects
Strategy & Planning
01

Strategy & Planning

Design & Development
02

Design & Development

Launch & Growth
03

Launch & Growth

Ongoing Support
04

Ongoing Support

Brand Systems
05

Brand Systems

Strategy & Planning
01

Strategy & Planning

Design & Development
02

Design & Development

Launch & Growth
03

Launch & Growth

Ongoing Support
04

Ongoing Support

Brand Systems
05

Brand Systems

Drag the arc, or focus it and use the arrow keys

Arc Carousel

NewSection

A centred hero over an endlessly draggable arc of cards that shrink as they reach the middle and swell toward the edges.

Side Menu

NewNavigation

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.

WeAre The Best
WeAre The Best

Scroll inside the frame

Ink Sweep

NewSection

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

Card Ascent

NewSection

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.

What's next

The section that pushes the relay off screen

04
Frames
1440
Design grid
0
Timers

Scroll inside the frame

Image Relay

NewSection

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.

Dock

NewNavigation

A macOS-style dock whose icons magnify as the cursor sweeps past them.

v2.4

Motion primitives

Drag or click to send this card back.

v2.3

Dark mode tokens

Drag or click to send this card back.

v2.2

Dock magnification

Drag or click to send this card back.

v2.1

Copy-paste registry

Drag or click to send this card back.

Shuffle Cards

NewMotion

A draggable card stack that cycles on click, drag, or a timer.

Edge rendering

Move your cursor across the card — the glow tracks it.

Custom color

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.

Animated Tabs

Navigation

A tab bar with a spring-loaded pill that slides between the active item.

Dropped it in and shipped the same day.
Aria M. · Design engineer
The only component set that matched our brand.
Kel D. · Founder
Zero runtime surprises, which is the point.
Ravi S. · Frontend lead
Motion defaults are genuinely tasteful.
Juno P. · Product designer
Dropped it in and shipped the same day.
Aria M. · Design engineer
The only component set that matched our brand.
Kel D. · Founder
Zero runtime surprises, which is the point.
Ravi S. · Frontend lead
Motion defaults are genuinely tasteful.
Juno P. · Product designer
Design engineer
Founder
Frontend lead
Product designer
Design engineer
Founder
Frontend lead
Product designer

Marquee

Layout

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.

Shipping something new

analyzing dependencies…

A light sweep across any text, driven entirely by a CSS gradient animation.