Targeted Tracks → Best Overall Hack + Best Code + Best Startup Idea + Best Design

Team Name: Scrolla


image.png

Why Scrolla? 💡

In an era characterized by short attention spans and the pervasive influence of social media, Scrolla emerges as a revolutionary platform that transforms the way educational content is delivered. By leveraging the addictive nature of infinite scrolling and the popularity of short-form videos, Scrolla bridges the gap between passive content consumption and active learning.

Image

  • Declining Attention Spans: Studies have observed a significant reduction in the average human attention span, decreasing from approximately 2.5 minutes in 2004 to around 45 seconds in recent years.

  • Increased Stress Levels: Engaging in multitasking, especially with digital devices, can lead to cognitive overload, resulting in elevated stress levels and reduced comprehension.

  • Impact on Learning: Media multitasking has been associated with poorer academic performance, diminished executive function, and reduced memory retention.

  • Content Consumption Patterns: The rise of short-form content and infinite scrolling has conditioned audiences to prefer brief, easily digestible information, potentially reducing the capacity for sustained focus.


What it does 🤔

Scrolla is a smart learning platform designed to transform educational content into engaging, short-form videos that mimic the social media experience. The app's goal is to support students in learning complex material while keeping them engaged through familiar scrolling mechanics. Studies estimate that the average attention span has dropped to just 8 seconds, making traditional learning methods increasingly ineffective. Unfortunately, less than 30% of students fully engage with assigned reading materials, leading to knowledge gaps and academic underperformance.

Although educational platforms already exist, they often fail to capture students' attention in the way social media does. That's where Scrolla comes in. We aim to transform lecture slides, textbooks, and course materials into bite-sized, algorithm-driven content that students can consume through an infinite-scroll interface, ultimately improving information retention while satisfying the desire for quick, engaging content. The app can also provide a platform for students to share knowledge, ask questions, and engage with peers through comments and likes, creating a collaborative learning environment.

At its core, Scrolla is built to replace mindless scrolling with meaningful learning. Instead of getting lost in endless TikTok or Instagram reels, users can hop on Scrolla to learn something new every time they scroll—turning screen time into study time without sacrificing engagement.


UX Flow:

  • Users visit Scrolla's landing page and proceed to sign in via Google OAuth
  • Upon login, users land on the dashboard to explore courses or upload materials.
  • Users drag and drop PDFs, lecture slides, textbook excerpts, or paste blog/website links.
  • AI extracts key insights, converts them into short-form video explainers, and formats them into an infinite scroll-friendly feed.
  • Users go to their feed and can scroll through their reels. They engage and learn with the reels generated by watching, liking, and sharing them.
  • Students control the visibility of their notes; public feeds are categorized by course for collaborative learning.
  • A spaced repetition algorithm ensures critical concepts reappear at optimal intervals.
  • Users track progress, identify knowledge gaps, and refine their learning strategy.

How we built it ⚙️

🚀 Crafted with passion & innovation, our AI-powered full-stack app tackles real-world challenges.
⚡ Built with cutting-edge tech, it seamlessly integrates AI, ML, and modern development stacks.

image.png

Front-end: TypeScript, Vite, React, Redux, Tailwind CSS

Middleware & Backend: Flask, Firebase, Docker

ML Stack: Python, Agentic-AI, OpenAI, GPT-4o-mini, DALL·E 3, DeepGram, Crawl4AI

Video Generation: FFmpeg



Design 🎨

We drew inspiration from the evolved Double-Diamond design process, which goes beyond visual design to incorporate a comprehensive research cycle. Before diving into solutions, we discover and define the problem, ensuring a structured approach before developing and delivering the final product.

Double - Diamond image

🔍 Discover – Deep exploration of the problem we aim to solve.
🎯 Define – Refining insights into a clear problem statement.
💡 Develop – Brainstorming and iterating on potential solutions.
🚀 Deliver – Selecting and building the most effective solution.

To ensure precision, we used Figma, TLdraw, and other tools to prototype before writing a single line of code. This iterative approach allows us to gather feedback early, minimizing the need for extensive rework.

image.png


Research 📚

To build a truly impactful solution, we delved deep into research, exploring how digital habits shape learning. Here are some insightful resources that guided our approach:

Resources stacked up for future ⚡


Challenges we ran into 😤

We faced several challenges during the hackathon, primarily related to content generation and processing. One major hurdle was developing an algorithm that could effectively extract key concepts from academic materials and transform them into engaging short-form content. Additionally, ensuring that the generated content was both educational and entertaining required significant refining - we experimented with the background video, music, and text of the videos. Another critical challenge was ensuring that the music and visuals matched the content being displayed in the video, enhancing engagement without distracting from the learning experience.


Accomplishments that we're proud of ✨

We are proud of creating a platform that successfully merges education with the social media experience. Our AI was able to generate surprisingly engaging and accurate educational content from complex academic materials. And of course, working overnight to bring this vision to life was both challenging and rewarding!

This project was a notable accomplishment for us because it addressed a critical gap in modern education while leveraging familiar technologies in an innovative way. We believe Scrolla has the potential to transform how students engage with educational content.

Alt text

What's next for Scrolla 🚀

Scrolla's next steps focus on pushing short-form educational content to the next level. We plan to refine our AI-generated video reels, making them even more engaging and contextually rich. Enhancements like dynamic animations, improved voice modulation, and seamless music-video alignment will create a smoother experience.

We’re also exploring real-time personalization, where content adapts based on user interaction and learning behavior. Additionally, we aim to introduce collaborations with educators and student communities to diversify content styles while maintaining the addictive nature of scrolling. The future of learning is fast, fun, and powered by Scrolla!

image.png

Built With

Share this project:

Updates