Inspiration
Ghibli films celebrate quiet courage, small wonders, and the poetry of everyday life. This site takes that spirit as its compass: slow down, breathe, and notice. The design favors restraint over spectacle; rather than fireworks, we use gentle cues—stars, fireflies, soft light—to create atmosphere. The aim is not to mimic any single film but to evoke the studio’s tone: warm, hopeful, and deeply human.
What it does
It presents a responsive, accessible landing experience with a bold hero, a curated “Signature Works” gallery, and a personable “Characters We Love” section. Animations guide attention without demanding it, while decorative layers enhance mood. Everything is built with semantic HTML and modern CSS, so the page loads fast, works offline-friendly, and degrades gracefully when motion is reduced.
How we built it
HTML and CSS only, with progressive enhancement. Layouts use CSS Grid and columns; depth effects rely on perspective and layered shadows; decorations are gradients and small effects instead of heavy assets. BEM naming keeps styles modular and maintainable. The mobile menu is a CSS checkbox toggle—no JavaScript required—so performance and reliability remain high on low-end devices.
Challenges we ran into
Balancing atmosphere with readability: adding personality without sacrificing contrast or clarity. Creating motion that feels gentle, not distracting, was another challenge—especially while preserving accessibility with prefers-reduced-motion. Finally, achieving a masonry look without JS required careful column settings and image handling to maintain rhythm across breakpoints.
Accomplishments that we're proud of
A cohesive mood with minimal code, a fully responsive layout, and an interaction layer that stays respectful. The site feels handcrafted yet remains light, accessible, and easy to extend. We also kept design semantics clean through BEM, making future work straightforward for any contributor.
What we learned
Small details matter most when aiming for emotion: spacing, soft shadows, and timing curves can change the entire feel. We also reinforced that progressive, CSS-first solutions are often enough—and they keep complexity low. Lastly, naming discipline (BEM) pays off quickly as components evolve.
What's next for Ghibli Website
Add optional theme variations (Dawn/Sakura, Ocean Breeze), deepen content for each work, and include a minimal searchable index. We also plan to expand accessibility checks, add localized copy, and document a component library so others can reuse styles confidently. The goal remains the same: gentle, fast, and welcoming.
Log in or sign up for Devpost to join the conversation.