The Daily Hologram

Discover breaking stories and get deeply personalized news in one daily paper, with no compromise: smart summaries, educational comics, and an interactive crossword tailored to your interests.

Comment

Inspiration

Most news products force a tradeoff: discovery or personalization. We wanted both, in a format people actually enjoy.
The Daily Hologram was inspired by the feeling of opening a beautiful morning paper, reimagined as a cinematic 3D experience with modern AI intelligence.

What it does

The Daily Hologram generates a full daily edition in a 3D flipbook newspaper interface:

  • 5 mandatory global discovery stories (to prevent filter bubbles)
  • Optional personalized stories by location and topic
  • Rich AI summaries optimized for quick understanding
  • AI-generated editorial images for each story
  • A continuity-based educational comic page
  • A playable mini crossword based on the edition
  • A live voice companion for follow-up discussion. You can also select any word or text within the newspaper and essentially 'point' at it. That is sent as additional context to the voice model, enabling you to ask more effortlessly.

Design is core to the product: vintage paper textures, editorial layout choices, depth/flip animations, and immersive page composition make news consumption aesthetic, memorable, and calm.

How we built it

Frontend stack:

  • React 19 + TypeScript + Vite 6
  • Tailwind utility styling and custom 3D page transform system

Initial prototype and ideation completely powered by Google AI Studio (using the Gemini 3 Pro Preview model - incredible intelligence and design taste!): https://ai.studio/apps/drive/1wXu0pgsmCuXFqxJi3Owz5_r-W5WbL_Z3

Gemini-powered architecture (The right model for the right purpose):

  • gemini-3-flash-preview for:
    • News edition generation (structured output, search-grounded)
    • Comic script generation
    • Crossword clue/answer candidate generation
  • gemini-3-pro-image-preview for:
    • Final 4-panel comic strip image rendering
  • gemini-2.5-flash-image for:
    • Story editorial images
    • Character design reference images
  • gemini-2.5-flash-native-audio-preview-12-2025 for:
    • Real-time live voice companion

LLM chain flow (end-to-end)

  1. User sets edition preferences (language, topics, place, learning goal, comic character).
  2. Optional character portrait is generated (gemini-2.5-flash-image) and stored as continuity reference.
  3. Core edition stories are generated with Google Search grounding using gemini-3-flash-preview:
    • Always 5 global discovery stories
    • Optional personalized additions
  4. Article visuals are generated per story via gemini-2.5-flash-image.
  5. Crossword pipeline:
    • gemini-3-flash-preview produces quality clue/answer candidates
    • Local TypeScript engine constructs grid/intersections deterministically
  6. Comic pipeline:
    • gemini-3-flash-preview writes the next continuity episode (title, concept, panels, recap)
    • gemini-3-pro-image-preview renders a 4-panel comic using the stored character reference for consistency
  7. Live companion uses gemini-2.5-flash-native-audio-preview-12-2025 for real-time voice Q&A with selected-text context.

Challenges we ran into

  • Keeping strong global discovery while still feeling personally relevant
  • Making generated crossword content both valid and actually fun
  • Preventing async race conditions across multiple parallel AI tasks
  • Preserving visual elegance while fitting dynamic AI content into fixed newspaper pages

Accomplishments that we're proud of

  • Built a polished, aesthetic 3D newspaper experience, not just a text chatbot
  • Integrated multiple Gemini model capabilities into one cohesive daily product
  • Created a product that feels editorially designed: beautiful layout, generated imagery, and interactive learning mechanics
  • Delivered discovery + personalization together, without compromise

What we learned

  • The Gemini model is great at capturing user intent and can great accelerate the way you write software.
  • Gemini provides high quality ready-to-use native tools like Web search which make it to super easy to add those capabilities in your application.
  • UX quality and visual taste matter as much as model quality for user trust
  • Structured outputs dramatically improve reliability
  • Multi-model orchestration works best when each model has a clear role
  • Educational formats (comic + crossword) improve engagement and retention vs plain summaries

What's next for The Daily Hologram

  • Sharable editions and collaborative classroom/team modes

Built With

  • gemini
  • google-ai-studio
  • llm
  • nano-banana
  • vite
Share this project:

Updates