💡 Inspiration
Earth’s Story draws inspiration from the emotional power of anime!! Using this immersive storytelling style to highlight the urgent issue of environmental sustainability.
Traditional awareness campaigns often struggle to engage people on a personal level, so this project creates a visually and audibly rich experience that aims to deeply connect with everyone, with the hope of igniting a sense of responsibility to inspire meaningful action for all to contribute to a more sustainable future! :)
🚀 What it does
The project is a full-screen, vertical-scrolling web experience that tells a story about Earth's past, present, and sustainable future. As the user scrolls, they are guided through different chapters of the narrative, each with its own unique visual style and ambient audio. The experience features enchanting parallax effects, a custom cursor, music and a narrator, transforming a simple scroll into a powerful and immersive journey.
🛠️ How I built it
Core Technologies (no frameworks):
HTML:to provide the structural backbone of the project.
CSS: For all visual design and animation, including full-screen slide transitions with scroll-snap, parallax scrolling backgrounds, and custom cursor styling.
JavaScript: Core of interactivity.its mainly used to manage the entire experience, handling user input (scrolling, keyboard presses), slide transitions, audio control (including fade-in/out effects), autoplay function and a custom Intersection Observer to trigger slide-specific animations.
Other Contents:
Suno: used for the emotional background music!
elevenLabs:generate voice for the narrator.
Adobe Firefly: to generate the breathtaking anime-inspired backgrounds.
⚡ Challenges I ran into
I faced the challenge of generating fresh ideas for how to tell the story in a unique and impactful way. To tackle this, I applied the design thinking methodology such as user empathy, brainstorming and ideation, so as to ensure the final experience was not only functional but also emotionally resonant and meaningful.
Most importantly, I learned that storytelling + technology can inspire action when facts alone cannot.
🏆 Accomplishments that I am proud of
I am proud of creating a highly immersive and emotional experience using only core web technologies.
I am especially proud of the visually outstanding and stunning web experience I created—one that goes beyond visuals by incorporating voice-overs generated with open-sourced apps such as ElevenLabs and music composed with Suno. The result is a captivating and emotionally resonant narrative that fully realizes my original vision.
📚 What I learned
I learned that HTML, CSS, and JavaScript are not to be underestimated. With creativity and persistence, these core technologies can be used to build powerful, meaningful, and highly interactive experiences.
Through this project, I realized that while tools and frameworks exist, it’s ultimately up to me to generate my own ideas and use the technologies in unique ways to bring them to life. The fundamentals give me the freedom to innovate without limits.
It’s not about the tools themselves, but about how I choose to use them.
🔮 What's next for Earth's Story: An Anime-Sustainability INSPIRED Journey!!
Looking ahead, I plan to expand the narrative with more chapters and even richer visual content on the current 11 slides, maybe for the background image i can replace them with gifs for a richer experience
I hope to explore additional JavaScript frameworks,such as GSAP, to create even smoother, more advanced animations and transitions. This will allow for more creative visual storytelling while maintaining performance and interactivity.
Log in or sign up for Devpost to join the conversation.