Dawn over KGEC
Bhor Magazine Website
Custom parallax hero animates clouds clearing, the KGEC building rising, and the sun emerging—crafted in Next.js, Tailwind, and Framer Motion with mobile-first performance tuning.
Timeline
Nov 2024 – Jan 2025
Key animations
7 hero states
Magazine issues
18 showcased
Tech focus
Project gallery
Visual highlights
A quick look at the states, flows, and artifacts that made this launch feel polished.
Project features
Crafted to feel human, performant, and scalable
Designed and engineered the two-section experience end-to-end: a parallax hero illustrating the campus sunrise and a firefly-lit carousel that showcases every past issue. Balanced expressive motion with strict performance budgets so readers on any device get a smooth, on-brand walkthrough.
Parallax dawn hero
Layered illustrations of the KGEC building, clouds, and sunrise animate on scroll to match the Bhor theme without sacrificing FPS.
Firefly issue carousel
Custom-built carousel displays every magazine with floating fireflies, forest gradients, and keyboard/drag support.
Performance-first motion
Lazy-loaded assets, reduced-motion fallbacks, and GPU-friendly transforms keep the experience crisp on low-end devices.
Services & deliverables
End-to-end partnership
Strategy, engineering, and activation workstreams stayed tightly aligned so the launch felt intentional.
Service
Concept & visual design
Sketched sunrise-themed storyboards, established the palette, and produced responsive comps for both sections.
- Storyboards
- UI kit
- Hi-fi mockups
Service
Frontend engineering
Implemented the hero and archive sections in Next.js with Tailwind primitives, parallax hooks, and intersection observers.
- Hero component
- Carousel system
- Testing
Service
Motion & optimization
Directed every animation, added firefly particle layers, and tuned for CLS/LCP + reduced-motion support.
- Motion tokens
- Perf budget
- QA checklist
Accomplishments
Business impact & program achievements
We measure success with data, ceremonies, and the teams who keep the experience running.
Stakeholder delight
<2 review cycles
Editorial board approved the experience after the second walkthrough thanks to accurate theming.
Engagement
+52% read time
Analytics showed visitors spent longer exploring past issues once the carousel shipped.
Performance
Lighthouse 96
Maintained 96+ Lighthouse despite parallax layers through lazy loading and compressed art.
Landmarks
Milestones that shaped the roadmap
From discovery to public launch we ran fixed-length pulses with clear artifacts at every turn.
Research & sketches
Captured Bhor's dawn narrative and storyboarded the hero animation.
Visual system
Produced style frames, cloud/college illustrations, and responsive layouts.
Hero engineering
Implemented parallax scroll, performance budgets, and reduced-motion paths.
Carousel build
Developed firefly animations, issue cards, and keyboard/drag interactions.
Polish & launch
QA across devices, tuned imagery, and deployed final build.