Scrollsane

• 

  Banner

• 

  Relaxing Reel 1

• 

  Relaxing Reel 2

Inspiration

Short-form video is engineered to maximize time-on-app. We wanted the same familiar swipe mechanic—full-screen vertical reels—but redirected toward calm rather than endless stimulation, as a provocation for wellness-focused product design.

What it does

Scrollsane is a vertical reel feed with a deliberate arc: high-energy hook clips → a brief transition → calmer videos. Ambient music plays underneath, its volume rising as you enter the calm section. You can tap to pause, mute all audio, and the app nudges you to slow down if you scroll too quickly through the calm zone. For the hackathon, it runs entirely on bundled local videos—no external content API needed.

How we built it

Built with Expo SDK 54, React Native, and TypeScript, using Expo Router for navigation. Video and audio playback runs on expo-av; the feed is a paging FlatList with fixed item heights for reliable snapping. Reel lists are auto-generated from assets/hooks and assets/calms via a Node sync script that produces typed require() modules. expo-image handles splash and branding assets.

Challenges we ran into

Reliable video playback: Getting consistent first-frame display and play state across many adjacent videos—handling load errors, retries, and ready-state signaling for the splash handoff—was the hardest engineering problem. Audio on iOS: Silent mode behavior, mixing ambient music with reel audio, and recovering after backgrounding all required careful AVSession mode configuration and lifecycle management. Scroll performance: Balancing smooth scrolling without aggressively unmounting video players took deliberate tuning.

Accomplishments that we're proud of

The feed itself tells a story—hooks → transition → calm. The dynamic ambient/reel audio mix that actively reinforces the mood shift feels especially cohesive.

What we learned

Feed design is behavior design: pacing, audio, and segment order matter as much as the clips themselves. Demo scope is a feature: local assets let you ship a convincing experience without API keys, billing, or compliance overhead.

What's next for Scrollsane

Wire in real content sources (licensed or partner feeds), user accounts, and personalization (goals, sensitivity settings, time-of-day), and production infrastructure (analytics, CDN, platform policy compliance). Stretch goals: guided breathing or CBT-style prompts, session summaries, and Apple Health/mindfulness integrations.

Built With

• expo.io
• react-native
• typescript