A premium real estate listing platform with smooth animations, optimized performance, and seamless user experience across all devices.
📹 Click the image above to watch the demo video, or download it directly.
A full-screen cinematic experience:
- Video background synced with scroll
- Smooth fade-out text effects
- Responsive hero layout that adapts to mobile
- Professional navigation with blur effects
- Dynamic content reveal as you scroll
Interactive luxury apartment cards:
- Hover Effect: Images zoom smoothly while card stays fixed
- Video Scrubbing: Scroll wheel or touch to preview each property
- Live Details: Price, bedrooms, bathrooms, square footage
- Click to Expand: Full apartment details with photos, history, highlights
- Responsive Grid: 4 columns on desktop → adapts to tablet and mobile
- Hero video synchronized with page scroll using GSAP ScrollTrigger
- Smooth intro badge fade-out based on scroll progress
- Animated content sections that reveal as you scroll
- Perfect 60fps on desktop, 30+fps on mobile
- Works seamlessly with mobile address bar
- Smooth zoom effect on hover (image only, card stays fixed)
- Click to expand into fullscreen detail view
- Dedicated scrub video for each apartment
- Wheel/touch gesture control for video playback
- Quick insights: price, beds, baths, sqft
- Luxury dark theme (#1a1816 background, cream text)
- Premium fonts: Josefin Slab + Cormorant Garamond
- Blur effects and glass morphism on cards
- Smooth transitions throughout
- Fully responsive: 390px phone → 1440px+ desktop
- ✅ Safari: Fixed number/email styling, custom SELECT styling
- ✅ Chrome/Firefox/Edge: Consistent rendering
- ✅ Touch-optimized: Smooth interactions on mobile
- ✅ Mobile address bar: Smart viewport handling with 100dvh
- Our Space — Showcase grid of featured apartments
- About Us — Editorial story about the brand
- Why Choose Us — Statistics and key features
- Team — Carousel of professionals with bios
- Consultation — Beautiful contact form
- Footer — Brand information and links
| Optimization | Impact |
|---|---|
Disabled backdrop-filter on mobile |
Eliminates GPU lag |
GSAP scrub: 1 on mobile |
Smoother 30fps updates |
| Touch event throttling (16ms) | Natural 60fps interaction |
normalizeScroll: true on mobile |
Handles address bar changes |
| Feature | Result |
|---|---|
| Preload links | Fast image loading |
loading="eager" + fetchpriority="high" |
Critical images load first |
content-visibility: auto |
Deferred rendering |
| Separate mobile/desktop videos | Optimized file sizes |
Result: 40% faster image loading on mobile 📊
will-change: transform, opacityon all animated elementscontain: layout style paintfor rendering isolation- Smooth transform-based animations (no layout shifts)
- Touch-optimized z-index and positioning
| Layer | Technology |
|---|---|
| Animations | GSAP 3.11.4 + ScrollTrigger |
| Styles | CSS3 Grid, Flexbox, Custom Properties |
| Responsive | Mobile-first, clamp() units |
| Scripts | Vanilla JS (no frameworks) |
| Fonts | Google Fonts (Josefin Slab, Cormorant Garamond) |
| Media | MP4 video, PNG/WebP images |
390px → iPhone SE & small phones
520px → Small phone adjustments
768px → Tablet & major breakpoint
1024px → Large devices
1440px+ → Full desktop experience
// Mobile: smoother, less frequent updates
scrub: isMobile ? 1 : true
// Enable scroll normalization for address bar
normalizeScroll: isMobile ? true : false
// Pin hero to viewport
pin: true- Desktop wheel: 1400px divisor = 22% faster
- Mobile touch: 1000px divisor = 30% faster
- Throttled events: 16ms delays prevent jank
- Hero section visible on load
- Content hidden below (invisible, no layout shift)
- As user scrolls past hero, content smoothly fades in
- Smooth 0.3s transitions on all sections
/scroll
├── index.html # Page markup + JavaScript
├── style.css # Complete styling system
├── README.md # This file
└── media/
├── 0307-desktop.mp4 # Hero video (desktop)
├── 0307-mobile.mp4 # Hero video (mobile)
├── apart1_16_9.png # Apartment 1 preview
├── apart1_16_9_video_scrub.mp4 # Apartment 1 scrub video
└── ... # More apartment media
Open the live demo in your browser.
Since the project uses local media files, you need a local server:
# From project root, use Python's built-in server
python3 -m http.server 8080
# Or use other servers:
# Node.js: npx http-server
# Ruby: ruby -run -ehttpd . -p8080Then visit: http://localhost:8080
Edit index.html to change video sources:
<video
id="apple-video"
data-src-desktop="your-video-desktop.mp4"
data-src-mobile="your-video-mobile.mp4"
...
/>Each apartment card in index.html contains:
- Preview image:
src="apart1_16_9.png" - Scrub video:
<video class="apartment-full-video"> - Details: Price, beds, baths, sqft
- History & highlights
Update CSS variables in style.css:
:root {
--page-bg: #1a1816; /* Background color */
--section-pad-x: clamp(...); /* Responsive padding */
}- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
| Metric | Mobile | Desktop |
|---|---|---|
| Scroll FPS | 30+ | 60 |
| Image Load Time | -40% faster | Optimized |
| Interaction Delay | <100ms | <50ms |
| LCP (Largest Contentful Paint) | Optimized | Optimized |
- Live Site: https://pavelbuiko04.github.io/Empire-Rent/
- GitHub Repo: View Source Code
This project showcases modern web development best practices:
- Performance First: Optimized for 60fps desktop, 30+fps mobile
- Mobile-Friendly: Mobile-first responsive design with dvh units
- Accessibility: Semantic HTML, ARIA labels, keyboard support
- UX Excellence: Smooth animations, no jarring transitions
- Cross-Browser: Consistent experience everywhere
- Clean Code: Vanilla JS, organized CSS, readable structure
Perfect for luxury real estate, high-end products, premium services, or any experience requiring stunning visual presentation.
- The contact form is UI-only (demo) and doesn't submit data
- All media files are optimized for web (mobile/desktop variants)
- CSS is fully custom—no framework dependencies
- JavaScript uses GSAP CDN for animations
Built with ❤️ using GSAP, CSS Grid, and meticulous attention to detail.