This time I jumped into something new. I found this make-it-oss project. This is a useful tool to help open source maintainers manage the documentation (maybe scaffolding or helping contributions). The issue #35 caught my attention because it described a specific details of what they want.
The issue I worked on was a feature request to improve the user experience. Here’s what the request said (in simple terms):
When the user clicks the arrow button in the GithubInput component and the file list appears, the new content should animate smoothly upward — a slide-up and fade-in motion.
At the same time, the Hero section (the big intro banner) should disappear, leaving the focus on the file list.
A Back button should appear at the top so the user can bring the Hero back if they want to start over. Basically, the goal was to make the whole interaction feel more natural.
Before jumping into code, I wanted to see how things worked.
The part that handles the submission and file display is the GithubInput component.
It already fetched and displayed files once the repo was processed, but the Landing page, which also contained the Hero section, didn’t know when those files were ready. So the first thing I needed to do was make these two components talk to each other.
That way, when files were ready, the Landing page could hide the Hero and trigger the animation for the results.
To make all that work, I started by letting the Landing page know when files were ready to show. I added an onFilesReady() callback in the GithubInput component so it could notify the parent once the repo scan finished. When that callback fired, the Landing page set a simple showFiles state to true — which controlled everything: hiding the Hero, showing the file list, and triggering the animation. Instead of creating new components, I reused GithubInput with a small filesOnly prop that hides the input and only renders the file checklist. For the animation itself, I kept it lightweight using Tailwind’s built-in transitions. The Hero fades and slides up out of view, and the file list fades in from below with a 300ms ease-out motion. I also added a Back button that scrolls smoothly to the top and resets the state. To keep it all stable, I avoided unmounting the Hero right away — I just visually hid it, which prevented any layout jumps and made the whole experience feel smooth and focused.
This PR taught me that UI polish is all about state control and simplicity. Smooth animations aren’t about fancy code, they come from clear logic. I learned how to reuse components smartly, how to hide elements without breaking layout flow, and how small visual cues can make a big difference in user experience. It was also a reminder that testing animations on different viewports (especially mobile) is crucial — timing and motion feel completely different on smaller screens.
Top comments (0)