Quote Shards

A daily word puzzle where famous quotes are shattered into 3-letter shards. Rearrange the scrambled pieces to reconstruct the original quote — fast! New puzzle every day. Compete on the leaderboard.

Comment 1

Inspiration

I've been building UnRiddle — a mobile puzzle game (Flutter) — for over a year now. The app features multiple quote-based puzzle modes, including Quote Breaker (a substitution cipher game) and Quote Falls (a word-cascade puzzle). The mobile game is close to release, and I've been working on marketing strategies to build an audience before launch.

Back in October/November 2025, I discovered Reddit's Devvit platform and saw an opportunity: why not bring one of my puzzle games to Reddit as a way to grow the community? I ported Quote Breaker to React, building it from scratch for web with a focus on being smooth, responsive, and playable on both PC and mobile. That became r/unriddle — a daily cryptogram puzzle where players decode famous quotes by cracking a substitution cipher.

Then, in early January 2026, I learned about the Reddit Games Hackathon. Quote Breaker would have been a perfect fit — but there was a problem. It was already 99% finished. The hackathon rules are clear: the game must be developed during the hackathon timeframe (Jan 12 – Feb 12, 2026). Quote Breaker didn't qualify.

So I asked myself: what if I build a second game?

I had another quote-based puzzle concept in mind — inspired by the game Groupies, where you rearrange grouped letter fragments to reconstruct text. I adapted the idea into QuoteShards: a daily puzzle where famous quotes are shattered into 3-letter fragments ("shards") that players must piece back together in the correct order.

What it does

Every day, a new famous quote is posted to r/QuoteShards. The quote's letters have been split into fixed 3-letter shards and scrambled. Players tap or drag shards from a tray into slots on a puzzle board to reconstruct the original text — as fast as they can.

Core mechanics:

  • Shards — the quote is stripped of spaces and punctuation, then split into 3-letter chunks that are shuffled randomly
  • Board — the puzzle board preserves the original sentence structure (spaces, punctuation, line breaks) so players can read partial text as they work
  • Validation — the game checks automatically when all slots are filled. No submit button. If incorrect, the board shakes and you keep going. If correct, you win instantly
  • Hints — every 60 seconds of play, you earn a hint. Using it auto-places one correct shard and locks it in place permanently. This prevents players from getting permanently stuck while still rewarding speed
  • Scoring — purely time-based. Faster solves = higher scores. Hints keep you moving, but the clock keeps ticking
  • Leaderboards — daily per-puzzle rankings and weekly aggregate leaderboards with crown badges for top finishers

How we built it

Tech stack: React 19 + TypeScript on the frontend, Express 5 on the backend, all running on Reddit's Devvit platform with Redis for persistence. Vite handles the build for both client and server, Tailwind CSS 4 for styling. The app has three separate client entrypoints (splash, game, weekly leaderboard) compiled into independent bundles.

Building Quote Breaker for Reddit taught me the Devvit platform inside and out — daily post scheduling, Redis-based persistence, weekly leaderboard aggregation, the webview architecture. QuoteShards was built on those learnings, but the gameplay required a fundamentally different UX approach.

The inline mode constraint was the single most important design decision. Reddit apps can run in two modes: inline (embedded in the feed) and expanded (fullscreen overlay). Inline mode is critical for reducing friction — players see the puzzle right in their feed without extra clicks. But inline mode comes with a hard limitation: no scrolling, swiping, or dragging, because those gestures would interfere with normal Reddit feed interactions.

This meant I had to design the entire game UI to fit within a fixed viewport with no scroll. The solution:

  • The splash screen runs inline — a compact card showing the daily puzzle info and a Play button
  • The game itself runs in expanded mode, where drag-and-drop is safe
  • Tap-to-place works as the primary interaction (tap a shard, then tap a slot) — clean and reliable on both mobile and desktop
  • Drag-and-drop is available as an alternative for players who prefer it, with a 5px movement threshold to distinguish taps from drags
  • Dynamic font scaling adjusts text size based on quote length so even long quotes fit without scrolling
  • The weekly leaderboard runs inline too, with adaptive pagination that calculates how many rows fit based on viewport height

Other technical highlights:

  • Deterministic puzzle selection — a seeded Fisher-Yates shuffle guarantees the same quote appears on the same day across all installations
  • Auto-save with 500ms debounce — close the tab mid-puzzle and resume exactly where you left off
  • Flying shard animations — shards arc through the air with cubic-bezier easing when placed via hints or tap-to-place, giving the game a polished, tactile feel
  • Smart hint targeting — hints find a random incorrect shard and auto-correct it, skipping already-locked slots

Challenges we ran into

Inline mode limitations were the biggest challenge by far. Designing a drag-based puzzle game that can't use drag in its primary display mode required rethinking the entire interaction model. I ended up with a hybrid approach: inline splash → expanded game → inline leaderboard, each optimized for its context.

Touch action conflicts on mobile were tricky. During drag operations, I dynamically set touchAction: 'none' to prevent the browser from interpreting drags as scroll gestures, then restore normal touch behavior when the drag ends.

Hint system balance took some iteration. Without hints, players could get permanently stuck staring at a wall of 3-letter fragments with no feedback on what's wrong. The 60-second timer strikes a balance: it's slow enough that fast players never need hints, but generous enough that stuck players can always make progress. Locking hinted shards in place prevents players from accidentally undoing their own progress.

Accomplishments that we're proud of

  • Fully inline splash and leaderboard — most Reddit games force players into expanded mode for everything. QuoteShards keeps the splash card and weekly leaderboard inline, so players can browse the feed, check scores, and jump into the puzzle with minimal friction.
  • The hint system that doesn't feel like cheating. Earning hints passively through time creates a safety net without cheapening the puzzle. Fast solvers never touch them; struggling players always have a way forward. The clock keeps ticking either way, so leaderboard integrity stays intact.
  • A complete, polished game in one hackathon. Daily puzzle scheduling, auto-save, leaderboards, drag-and-drop with tap fallback, flying animations, responsive design across mobile and desktop — all shipped and playable at r/QuoteShards.
  • Building a second Reddit game in a fraction of the time. The architectural patterns from Quote Breaker — post scheduling, Redis persistence, score aggregation, weekly leaderboard with crown badges — transferred cleanly, letting me focus the hackathon time on what makes QuoteShards unique: the shard mechanic and its UX.

What we learned

  • Inline mode is worth the design constraints. The reduced friction of playing directly in the feed is a massive UX win. Every extra click you eliminate keeps more players engaged.
  • Reusable systems pay off. The daily post scheduler, weekly leaderboard aggregation, Redis persistence patterns, and score calculation logic from Quote Breaker transferred almost directly to QuoteShards. What took weeks the first time took days the second time.
  • Simple rules, deep gameplay. QuoteShards has exactly one rule: put the shards in order. But the emergent challenge of reading partial text, recognizing word boundaries, and deducing the correct sequence creates a surprisingly deep puzzle.

What's next for Quote Shards

QuoteShards is the second game in the UnRiddle series of daily quote-based puzzles for Reddit. Each game offers a different way to engage with famous quotes:

Game Puzzle Type Community
UnRiddle Quotes Decode a substitution cipher r/unriddle
QuoteShards Rearrange 3-letter fragments r/QuoteShards

The mobile UnRiddle app (Flutter) is approaching release with both game modes and more. The Reddit games serve as both standalone daily puzzles and a bridge to the broader UnRiddle ecosystem — building a community of word puzzle enthusiasts one quote at a time.

Built With

Share this project:

Updates