Dwella
a homebuying landing page with a film hero, a working cash-back calculator and saved listings
Dwella is a one-page landing page template for a homebuying, real-estate or mortgage brand, shown as a fictional homebuying platform that gives buyers part of the agent fee back. The hero is a rounded photo card that plays a looping house film, with two tilted listing cards that fan apart on hover and price bubbles that stay pinned to the houses in the moving film. The intro statement fills in word by word as you scroll while two photos open into pills, then four figures count up. A dark How it works section floats cards, photos and a pin over a night-time apartment building, each at its own speed. A Keep more deck pins on desktop and swaps three offers: the photo crosses to the other side, then each new offer rises over the last. A working cash-back calculator takes a home price from a slider, a self-serve or full-service plan and an optional mortgage credit, and tweens the total, the split bar and the breakdown as you change them. A Fresh on Dwella carousel of six homes scrolls with arrows, mouse drag or touch, shows a progress bar, and remembers saved homes in localStorage. A dark map section pops in price chips and photos around a pulsing pin, buyer reviews drift in three columns, and an FAQ opens one answer at a time with FAQPage structured data for search engines. The page closes with a name marquee whose pill-shaped photo opens into a full-width banner film, and a giant wordmark footer. There is no backend: listings, figures and reviews are in the HTML, and the calculator's rates are constants in src/widgets.ts. Phones, tablets and phones held sideways get stacked, unpinned layouts with 44px touch targets, the films load a smaller file on small screens and skip entirely with data saver or reduced motion, and reduced-motion settings show every section complete and still. All photos and both films are included as responsive WebP and MP4, and Geist loads from Google Fonts. Built with TypeScript, HTML and CSS plus GSAP and Lenis, with Vite included.
$28.00 — one-time price, free updates
- A website template
- Plain HTML, CSS and JavaScript · no framework
- Build unlimited client sites with it
Built with Plain JavaScript, CSS, SVG, GSAP, Lenis smooth scroll.
What is in the zip
- app.css
- index.html
- src/heroTrack.ts
- src/main.ts
- src/rec.ts
- src/widgets.ts
- tsconfig.json
Version history
- v1.0.0, 2026-10-14 — First release. Dwella shipped, with the reel recorded from the real page.