UI Labs
Interactive Components for the Modern Web
A collection of UI components and patterns built with Astro, React, and Tailwind CSS. Explore interactive animations, smooth transitions, and pixel-perfect designs.
01
Interactive Encrypted Data
A simple component that adds a bit of mystery to your UI. It shows off hidden or encrypted data in a cool way—think animated numbers in background and an interactive eye that reacts when you hover over it.
02
Sign Document
I got inspired by Nitish Khagwal's work and decided to rebuild it in React. While implementing this component I learned some new tricks with Canvas API playing around with quadraticCurveTo for smoother drawing.
03
Hover Dropdown
Just experimenting with Amazon's hover interaction—specifically, the way it creates a small buffer zone for mouse before triggering dropdown. It's a subtle but effective way to improve usability and make navigation feel more natural.
Hover Me
04
Map Component
Experimenting with different ways to display maps in UI, focusing on both functionality and visual appeal. I'm also playing around with React Motion to animate card shapes, aiming for a dynamic user experience.
05
Chat Input
Just working on a chat interface for my AI app, integrated into another project. The LLM is disabled for now to keep costs down while I refine UI and functionality. The chat also supports rendering Markdown in real-time as data streams in.
07
Toast Component
Experimenting with a toast component, trying out different animation styles. Built this one mostly with vanilla CSS and JavaScript to keep it lightweight and flexible.
08
Card Component
Trying to recreate a realistic leather texture on card designs. Playing with subtle details to give it that premium, tactile feel.
3782 8224 6310 004
xxxx
AMEX
09
JoJo Land
Played around with this design because I love the color palette from JoJo Part 9. Along the way, I learned how to use clip-path and mix-blend-mode—super useful for quick, creative image transformations.
