|
Explore all components from the Academic Index design system
Score Color System
The signature 7-tier color gradient for academic performance
Auth Components
Self-contained authentication components
Premium Form Card
Glassmorphism card with shimmer effect for auth forms.
Sign In
Auth Logo
Auth Divider
Google OAuth Button
Form Links
Start your journey
Welcome back
Reset access
Get verification
Grade Selection
What grade are you currently in?
This helps us tailor your college recommendations and timeline
Email Confirmation View
Account Created
We've sent a verification email to user@example.com. Click the link to activate your account.
Check spam if you don't see the email.
Timeline
Scroll-driven timeline with text fill effect
2024
2024
Application Journey Begins
Start your college application process with comprehensive planning.
2025
2025
Academic Excellence
Focus on maintaining strong grades and test scores.
Future
Future
Dream School Awaits
Submit applications and await admission decisions.
Animated Icons
Icon components for various UI states
Upload
ML
Report
Papers
Timer
Dual Upload Section
Two-step PDF upload with transcript and Common App documents
1. Upload Transcript
Upload your most recent high school transcript (unofficial OR official) as a PDF
2. Upload Common App PDFs
In Common App, download the preview of all 6 main sections:
1.Profile | 2.Family | 3.Education | 4.Testing | 5.Activities | 6.Writing
Please do NOT upload one PDF with your entire application. Upload each section individually!
Processing Documents
0 of 7 PDFs uploaded
No files uploaded yet
Upload 7 more PDFs (0/7)
Infinite Slider
Continuous scroll slider
Text Effects
Animated text components
Text Roll (Hover over me)
Typing Text
Wave Text (Hover)
Radial Orbital Timeline
Interactive orbital timeline with score ring
0
LIMITED
Individual Scores
Circular score progress rings
Where You Stand
Click on score ranges for contextHover over score ranges for context
213
/ 240
Your Score
Very strong overall; competitive for highly selective colleges.
Your Potential
Unlock your full academic potential by improving key areas across your profile
Current Score
Potential Score
+12 points potential increase
Score Snapshot
View your current academic performance across all key areas
School Recommendations
Personalized school recommendations
School Recommendations
Based on your academic index, here are recommended schools tailored to your profile
Safety
Schools where you have a strong chance of admission
Your profile is excellent!
You'd be a strong candidate anywhere
Target
Schools that fit your academic profile perfectly
Duke University
Columbia University
Reach
Ambitious schools that may be a stretch, but possible
Yale University
Princeton University
Stanford University
* These recommendations are purely predictive based on academic index scores and do not guarantee admission. Actual admissions decisions depend on many factors.
Leaderboard
Complete leaderboard with navigation
Class of 2026 Rankings
Dot Shader Background
Interactive Three.js dot shader with mouse trails
Portable UI Components
Self-contained components ready to drop into any project
Award Badges
Delete Buttons
Empty States
No Awards Added
Add your awards to populate this section.
File Upload Zone
File Status Cards
transcript.pdf(Transcript)
Complete ✓
essay.pdf(Essay)
Uploading... 65%
recommendation.pdf(Recommendation)
Ready to upload
report.pdf(Report)
File too large
School Search Input
Interactive school search with dropdown suggestions, selected chips, and skip button.
What schools are you thinking about?
Type a few schools you already know. We'll use this to personalize your recommendations.
Interests Selector
Progressive disclosure interest selector with "I'm Exploring" option and collapsible grid. Max 3 selections.
What interests you?
Pick what you're curious about. Or skip if you're still exploring.
Processing Sidebar
Right sidebar showing file upload progress with animations. This component pairs with DualUploadSection.
Processing Documents
0 of 7 PDFs uploaded
No files uploaded yet
Upload 7 more PDFs (0/7)
Score Loading Panel
Animated loading panel with spinning rings, progress steps, and success state. Click the button to toggle between loading and ready states.
Survey Area
This represents the main content area (75% width) where the survey form would be.
Calculating your score...
Your Academic Indexis being calculated
We're analyzing your transcript, activities, and achievements to generate your comprehensive score.
Validating your transcript...
Analyzing course rigor...
Evaluating activities...
Calculating your score...
Please stay on this screen. You will be redirected once your score is ready.
Edit/View Toggle
Student Name: Alex Chen
Grade: 11 • GPA: 3.8
Interests: Computer Science, Debate Club, Robotics
Save Status Toast
Click buttons to trigger toast notifications:
Interaction Prompts
Mobile tap/swipe prompts (check on mobile):
Tap any element to explore
Swipe to navigate
Bento Grid
Flexible grid layout for feature cards
Academic Index
Calculate your academic standing.
Leaderboard
See how you rank among peers.
School Match
Find your best-fit colleges.
Progress Tracker
Track your application journey.
AI Analysis
Get intelligent insights.
Awards
Discover scholarship opportunities.
Progress Indicators
Steps, progress bars, and completion indicators with Academic Index animations