Inspiration
The name Hyperbloom sparked the central idea: a flower opening as new ideas take shape. I wanted to turn that identity into an experience visitors could move through.
That became Inside the Bloom: a cinematic redesign where a glass flower unfolds as you scroll, revealing the challenges, people, and opportunities behind Hyperbloom.
What it does
The website guides student builders through Hyperbloom’s hackathons, partners, community, and resources within one continuous visual journey.
Beyond the opening animation, visitors can explore a filterable event archive, search the journal, browse past projects and recordings in the gallery, and find team and contact information. Registration and submission links lead to the official services.
The experience includes responsive layouts, keyboard navigation, visible focus indicators, reduced-motion support, and a persistent motion preference.
This project is an independent redesign concept of Hyperbloom Hacks.
How I built it
I built the frontend with React, Vite, and CSS, using layered flower artwork and scroll-driven animation to create depth. Motion follows native scrolling through requestAnimationFrame, allowing the bloom to open and close as visitors move through the page.
I used ImageGen to create the bloom artwork and optimized the images into WebP assets. Phosphor icons, self-hosted fonts, and an ivory, cobalt, and gold palette carry the visual identity across the homepage and secondary pages.
The website is deployed on Firebase Hosting. AI-assisted development supported implementation and iteration, alongside browser checks across desktop and mobile layouts.
Challenges I ran into
One of the biggest challenges was sustaining the cinematic feeling after the opening section. The rest of the homepage needed to feel connected to the bloom while giving each section enough space and clarity.
Another challenge was balancing detailed visuals with readable content and useful interactions. That meant simplifying crowded sections, refining the sponsor presentation, and making the journal easier to scan.
Adapting the experience for smaller screens and different motion preferences also required careful attention to layout, image sizes, and navigation.
Accomplishments that I'm proud of
I’m proud of creating a recognizable visual identity that carries through the entire experience, from the unfolding flower to the journal and gallery.
I’m also proud that the design supports practical tasks. Visitors can find events, explore resources, watch recordings, and follow clear paths to participate.
What I learned
I learned how much a cinematic website depends on pacing, hierarchy, and restraint. Some of the strongest improvements came from removing visual clutter and giving the content more room.
I also learned to treat motion, accessibility, and responsive design as connected parts of the same experience.
What's next for Hyperbloom — Inside the Bloom
I would have liked more time to fine-tune the animations, polish the smaller interactions, and implement more features.
Next, I’d like to test the experience with student builders, use their feedback to improve navigation and usability, and expand event discovery. I’d also like to make future content updates easier while preserving the visual consistency of the site.
Log in or sign up for Devpost to join the conversation.