Reframe: Clarity in Motion

Reframe is an emotion-aware AI clarity engine that shifts perspective, decodes overwhelm, and generates personalized action plans to build real momentum for students and young professionals.

Comment

Inspiration

As college students, it's normal to compare yourself to others and feel behind. Reframe was inspired by the feeling of being in-between: not failing, not succeeding, but feeling stuck in place. It often feels like everyone else has a roadmap while you are still figuring out your own.

The project was born from a simple idea: clarity is not about having everything figured out. It is about knowing your next step.

Instead of building another productivity tool or checklist app, we wanted to design a calm, reflective experience that helps users slow down, identify what feels unclear, and move forward with a plan.

Note: We recommend using full-screen mode when accessing our website for the most immersive experience. :)

What it does

Reframe is an interactive clarity experience.

Users:

  • Choose the area of their work life they want to improve (school, career, internships, life/adulting)
  • Move through a structured reflection flow
  • See their next steps presented visually
  • Receive the option to play calming music throughout their reflection

This experience avoids overwhelming dashboards or heavy input forms. The timeline and scroll-based interactions reinforce the idea that clarity unfolds gradually.

How we built it

Reframe was built as a responsive frontend experience using:

  • HTML
  • CSS (glassmorphism, layered gradients, controlled blur effects)
  • JavaScript (IntersectionObserver for scroll-triggered animations)
  • Custom animation logic for timeline motion and visual progress indicators

Key implementation details:

  • Scroll-based line fills using height animation
  • Controlled orb positioning with pointer-events disabled to preserve visual focus
  • Responsive layout refinements to prevent overflow
  • Optimized ambient audio for optional immersion without forcing interaction

Backend:

  • Built with FastAPI (Python)
  • Integrated Groq’s LLM API to generate personalized reframing text, 3 insight analyses, action steps, & a structured week/month timeline

Challenges we ran into

Some of the biggest challenges were balancing visual design and implementing the backend portion.

Scroll-triggered animations caused flickering accent lines, layout shifts, background edge issues, and scroll-lock conflicts on smaller screens.

Implementing the backend portion was also a struggle due to constraints while running the program.

Accomplishments that we're proud of

  • Creating a cinematic UI
  • Building a scroll-driven visual system that feels calm rather than distracting
  • Integrating AI API to customize each user interaction

Most importantly, Reframe feels cohesive. The motion, typography, and interaction style all reinforce the same idea: clarity becomes momentum.

What we learned

  • Environment setup is a major part of building
  • How Git control works in a collaborative project among multiple people
  • Full-stack development
  • Include a marketing major with experience in graphic design on your team :)

What's next for Reframe: Clarity in Motion

  • Progress tracking with saved profiles
  • Social community
  • Smarter AI responses

Built With

Share this project:

Updates