Inspiration
I have always been haunted by those moments when a book, a line, a word, or a feeling touches the places inside you you didn’t even know existed. That quiet recognition, a memory brushing past the edge of your mind, something that returns before you can name it; that is where this project begins.
This project "What's That?" was born from the desire to capture those fleeting moments of literary magic: the way a story can shift your perspective subtly, the way a phrase can echo in your heart for days, or the way a single word can summon a world. I wanted a place where readers, writers, and wanderers of thought could chase that delicate, ineffable feeling and maybe, finally, give it a name.
What it does
What's That? allows users to explore books, quotes, words, and feelings by vibe, memory, and emotion rather than keywords:
- Books can be found through mood sliders or by describing a cover you remember.
- Quotes are discoverable by fragments of text, emotions, or context you recall.
- Feelings can be named through intuitive sliders, descriptions, or prompts, bridging the gap between experience and language.
- Words unlock concepts and sensations you’ve felt but never known the names for.
Every section offers “Try Another” functionality, letting the user wander through curated, real literary treasures, experiencing the serendipity of discovery as if browsing a quiet, late-night bookstore.
How we built it
The website is a React/Next.js application designed with care for emotional resonance and nostalgia:
- Interactive discovery tools: Mood sliders, cover selectors, and descriptive search forms let users explore content in a gentle, intuitive way.
- Curated content: Only real books, quotes, words, and feelings, carefully chosen to evoke deep emotional responses.
- Design aesthetic: Warm cream backgrounds, dusk blue accents, soft shadows, rounded corners, and carefully selected typography (Cormorant + DM Sans) create a literary, meditative environment.
- Dynamic and responsive: Smooth transitions and subtle animations make interactions feel alive without overwhelming the user.
- No login required: The experience is immediate and accessible, inviting users to linger and explore.
Challenges we ran into
Creating What's That? was as much a journey inward as it was outward:
- Curating content was a labor of love, requiring devotion to authenticity, history, and resonance.
- Designing for subtlety—how to make a button or a slider feel alive without breaking the meditative atmosphere—tested patience and precision.
- Translating emotion into data demanded both creativity and rigor, mapping ephemeral human experience into an interface that feels alive.
- Keeping the experience literary without sacrificing usability, so that each click feels like opening a familiar, beloved book.
Accomplishments that we're proud of
- Successfully curated a library of real books, quotes, words, and feelings that resonate emotionally and intellectually.
- Built a vibe-first discovery system that allows users to find content through intuition rather than search terms.
- Designed a poetic, immersive interface that reflects the contemplative, nostalgic experience of literature.
- Implemented dynamic “Try Another” functionality, letting users explore multiple entries without leaving the flow of discovery.
What we learned
- That the emotional resonance of literature can be mapped, coded, and shared without losing its subtlety.
- How to blend design, interaction, and content to evoke reflection and memory.
- The importance of curation and authenticity, creating a platform that respects the work and feeling of writers and thinkers across history.
- How small interactions—a button, a slider, a hover effect—can carry poetic weight when designed with intention.
What's next for What's That...?
- Expand the library: Add more books, quotes, feelings, and words from across cultures and languages.
- Save and favorite: Let users bookmark the pieces that touch them most.
- Community contributions: Invite readers to submit discoveries that evoke unique emotions or vibes.
- Enhanced visual storytelling: Incorporate cover art, typography, and subtle animations that enhance the emotional journey.
- Refined discovery tools: Deepen the AI-free, curated experience to make vibe-based searches even more intuitive and immersive.
Built With
- feelings
- figma
- google-fonts
- javascript
- next.js
- photoshop
- procreate
- procreate-&-photoshop-for-imagery
- quotes
- react
- soft-animations
- tailwind-css
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.