WordSurf

Inspiration

We wanted to reimagine how we interact with online content—transforming passive reading into an active, physical experience. What if you could feel the emotion in each sentence? What if you could ride it?

What it does

Wordsurf is a browser-based 2D platformer where players surf across dynamically curved sentences taken from live news articles. Each sentence’s shape is based on its emotional tone, narrated aloud as players ride the words, with the original page scrolling behind them in real time.

How we built it

• Apify scrapes live articles from the web.
• BEM AI structures the raw content into clean, parseable sentences.
• OpenAI scores each sentence’s tone, generating a “curviness” metric.
• Three.js renders the sentences as platform geometry in the browser.
• MiniMax Audio provides low-latency, real-time narration of each word.
• Browserbase used to seamlessly generate neighboring levels via agentic exploration of the user's inputed page.
• AWS Amplify + DynamoDB stores player progress and settings.

Challenges we ran into

• Syncing sentence curvature, narration, and scrolling was tricky across multiple services.
• Ensuring low-latency TTS playback from MiniMax while keeping gameplay smooth.
• Managing real-time background rendering through Browserbase without affecting performance.

Accomplishments that we're proud of

• Seamlessly integrating 6 sponsor tools into one cohesive browser experience.
• Creating a poetic fusion of gameplay, language, and AI.
• Building a playable web-native game where the level is the article.

What we learned

• How to orchestrate real-time services in-browser without a backend.
• The power of semantic tone when translated into geometry and movement.
• That reading can be reimagined as an embodied, dynamic experience.

What's next for WordSurf

• Finish Browserbase implementation, for cascading seamless transitions between levels, but also for level suggestion and perhaps chapter continuation
• Add support for multiplayer “surf battles” on the same article.
• Explore educational versions—surfing through textbook content or historical speeches.

Built With

• claude