feat(frontend): View Transitions API + Premium UI/UX Overhaul (#113)#148
Merged
DevanshuNEU merged 3 commits intoJan 5, 2026
Merged
Conversation
…penCodeIntel#113) - Add framer-motion dependency for animation fallback - Create useViewTransition hook for native View Transitions API - Create view-transitions.css for CSS animations - Update ResultCard with staggered blur-to-focus animation: - 75ms delay between cards - blur(10px) → blur(0px) effect - translateY(20px) → translateY(0) slide up - scale(0.98) → scale(1) subtle grow - Wrap results list with AnimatePresence for exit animations - Respect prefers-reduced-motion for accessibility Fixes OpenCodeIntel#113
…ects, spring physics Animation improvements: - Skeleton loading cards instead of boring spinner - Search bar glows and pulses when loading (indigo glow) - Search icon rotates during search - Result cards now have DRAMATIC entrance: - y: 60px (was 20px) - more noticeable slide - blur: 20px (was 10px) - more dramatic blur - scale: 0.9 (was 0.98) - more noticeable pop - rotateX: 15deg - subtle 3D tilt effect - Spring physics (damping: 25, stiffness: 200) - Stagger delay: 120ms (was 75ms) - Hover effect with lift and blue glow shadow - Border turns blue on hover This is the 'premium feel' we promised. Not subtle - NOTICEABLE.
…ium cards UX FIX - Stale Results Problem: - Separate inputQuery (typing) vs searchedQuery (what was searched) - When user types new query, results blur/fade to 40% opacity - Yellow indicator: 'Press Enter to search for X' with pulsing dot - Shows '(showing results for Y)' to clarify what's displayed - Results have subtle 2px blur + scale down to 0.98 when stale VISUAL REDESIGN - Premium Card Design: - Removed cramped border-b between header and code - More padding (px-6 py-5 vs px-5 py-4) - Function name is now the HERO (text-lg, hover turns blue) - Match score in colored box with gradient text: - Green (70%+): emerald gradient - Blue (50-70%): blue/indigo gradient - Amber (<50%): orange gradient - Full file path shown (not truncated) - Type badge is minimal (bg-white/5, no border) CODE BLOCK IMPROVEMENTS: - Max height 200px with gradient fade - 'Show X more lines' button to expand - 'Show less' button to collapse - Darker code background (#08080a) - Better padding in code block SPACING: - Cards now have space-y-6 (was space-y-4) - More breathing room overall This transforms the 'meh' results page into a premium experience.
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎬 View Transitions API + Premium UI/UX Overhaul
Closes #113
Overview
This PR transforms the search results experience from "functional" to "premium" with dramatic animations, intelligent UX for stale results, and a complete visual redesign of result cards.
Animation System
Framer Motion Integration
framer-motiondependency for cross-browser animation supportuseViewTransitionhook for native View Transitions API (future-ready)view-transitions.cssfor CSS-based animationsResult Card Animations
Loading State
Search Bar During Loading
UX Fix: Stale Results Indicator
Problem: When user typed a new query, old results stayed visible, causing confusion.
Solution:
inputQuery(what user is typing) vssearchedQuery(what was searched)Visual Redesign: Premium Cards
Match Score Badge (THE HERO)
Color-coded based on confidence:
from-emerald-400 to-green-500)from-blue-400 to-indigo-500)from-amber-400 to-orange-500)Card Layout
Code Block Improvements
Hover Effects
📁 Files Changed
Created
frontend/src/hooks/useViewTransition.ts- View Transitions API hookfrontend/src/styles/view-transitions.css- Animation CSSModified
frontend/package.json- Added framer-motionfrontend/src/main.tsx- CSS importfrontend/src/pages/LandingPage.tsx- Major updates:🧪 Testing
Animation Test:
Stale Results Test:
Code Expand Test:
Accessibility:
prefers-reduced-motion: reduce📸 Screenshots
Stale Results Indicator
![Stale results blur with yellow indicator]
Premium Cards with Color-Coded Scores
![Cards with green/blue/amber match badges]
Loading State
![Skeleton cards during search]
✅ Checklist
prefers-reduced-motionThis transforms the search experience from "functional dev tool" to "premium product" 🚀