Fluid Font Size
Make 3-5 characters fit on a single-line space using CSS clamp() function.
Animated Gradient SVG Button
Animate SVG button with fading gradient. Beautiful and subtle micro-interaction inspired by dating app TanTan's bottom tab navigator's button icon.
Dialog Height Transition
Change dialog height based on content. Inspired by About This Mac tabbed dialogue.
Graduated Frosty Overlay
Graduated frosty overlay on images. Inspired by AppleTV app.
Loaded Image Transition
Transition from plain background colour to image using image tag onload event.
How To use
Check dependency for each project
We use libraries and packages for better code readability and performance optimisation. You can find them at the info section on each project page.
Visit the repository folder on Github
You will find a index.js file and index.module.css on each project.
Copy and paste the code
After installing the required dependencies, copy the React code and its stylesheet to your own project.
Modify your CSS
As every project is written in plain old CSS, you can adapt the existing styles to any preferred CSS frameworks.