Frontend Playground | 김미소의 포트폴리오

Motion Gallery

Thu, 09 Oct 2025 00:00:00 +0000

I wanted to see firsthand how much impact animation has on user experience, so I created a collection of interaction experiments using the Framer Motion library and TailwindCSS.

I explored various ways components could appear, disappear, or respond to mouse hover in ways that feel the most natural and enjoyable. By combining properties like whileHover and whileTap, I made the cards move rhythmically as if they were alive, and through variants, I experimented with smooth fade, slide, and scale transitions between components.

Through these experiments, I realized that animation is not merely a visual element but a powerful tool that guides user attention and enhances engagement with content. Styling quickly with TailwindCSS while adding dynamic elements using Framer Motion was an enjoyable learning experience in itself.

Glassmorphism Test

Wed, 08 Oct 2025 00:00:00 +0000

I was curious about how the latest UI trend, Glassmorphism, is implemented, so I experimented with creating it using only TailwindCSS.

Instead of writing separate CSS code, I combined TailwindCSS utility classes such as backdrop-filter and blur, observing the visual changes in real time. By slightly adjusting the transparency and border thickness, I explored how to achieve the most natural glass-like depth that seems to float above the background.

I also added a simple hover animation to test how the design would feel when interactivity is introduced. Through this small experiment, I once again confirmed that even complex-looking UI designs can be built quickly and intuitively using only utility-based approaches.

Parallax Scroll Experiment

Tue, 07 Oct 2025 00:00:00 +0000

I was curious about how scrolling alone could bring depth and liveliness to a website, so I experimented with creating a parallax effect using only Vanilla JavaScript and CSS.

First, I retrieved the scroll position (scrollY) and adjusted the transform: translateY() values of background, middle, and foreground image layers at different rates. Observing how the sense of depth changed with varying speeds between layers was an interesting process.

I learned that relying solely on the scroll event can make animations appear choppy, so I improved it by using requestAnimationFrame to synchronize with the browser’s rendering cycle for smoother movement. I also explored performance optimization techniques such as using IntersectionObserver to trigger animations only when visible and applying the translateZ(0) trick to enable GPU acceleration.

Through this experiment, I was able to experience firsthand the fundamental principles of scroll-based animation and the importance of performance optimization.

Responsive Grid Layout

Mon, 06 Oct 2025 00:00:00 +0000

This experiment began from a question: how can we create a responsive grid layout for websites more efficiently?

At first, I approached it by manually specifying the number of columns at each breakpoint using TailwindCSS utilities like grid-cols-2 and md:grid-cols-3. However, while looking for a more flexible method, I discovered the pure CSS Grid property repeat(auto-fit, minmax()).

By applying this property, I found that the number of columns automatically adjusted according to the screen width while maintaining a minimum item size. It eliminated the need to define breakpoints one by one, making the code much simpler, and the layout aligned naturally across various screen sizes from mobile to desktop. I also experimented with Tailwind’s gap utility to consistently maintain spacing between items.

Through this experiment, I realized how flexible and efficient layouts can be when combining the convenience of TailwindCSS with the power of pure CSS Grid.