Case study · Concept
Rosestone Hideaway
An immersive landing page for a restored stone cottage. Built to test how much atmosphere a page can carry before it gets in the way of booking.
- Status
- Concept. Not a live business, no client.
- What it is
- Landing page for a Cotswolds holiday let
- Built by
- Arun Paul, Saggar Studio
- Year
- Core stack
- React 19, TanStack Start, TypeScript, Tailwind CSS v4, Radix UI, Motion
Summary
In short.
Rosestone Hideaway is a concept website for a single restored stone cottage in Gloucestershire. It is a studio piece, made to show what a small holiday let can do with its own site rather than a listing page.
The page runs from a hero with three lighting moods, through the cottage's sustainability story and a gallery of its rooms and garden, to a booking card.
The brief
The question.
A holiday let sells a feeling, and a booking form sells nothing. The concept tests how much atmosphere a page can carry, in motion, photography and type, before it starts getting in the way of someone checking dates.
What was built
Four parts that set the mood.
A hero with three lighting moods
Dawn mist, Golden hour and Evening hearth each change the light across the page, with a one-line description under the switch. The arched photograph, streamed as optimised video and imagery, sits beside a guest-journal quote.
Tilting cards for the sustainability story
Three cards cover the restoration, the zero-waste stay and the power supply. Motion springs tilt each card in 3D as the cursor moves over it.
A parallax gallery
The garden, the window seat and the kitchen move at different speeds on scroll, each captioned as a numbered space.
A booking card with plain states
Check-in, check-out and guest fields sit in one row, built with React Hook Form and validated with Zod. When bookings are paused, the card says so and when they reopen.
All motion, including the tilt, parallax and mood transitions, switches off for visitors who have reduced motion turned on.
The whole page
Top to bottom.
Stack
What it runs on.
| Framework | React 19.2, TanStack Start v1 (SSR and server functions), Nitro for edge deployment to Cloudflare and similar environments |
|---|---|
| Language and build | TypeScript 5.8 strict, Vite 8 with @vitejs/plugin-react, ESLint 9, Prettier 3 |
| Routing and data | TanStack Router (type-safe, filesystem-based), TanStack Query v5, Zod 3.25 |
| Styling | Tailwind CSS v4.2 with CSS-first @theme tokens in OKLCH, tw-animate-css and custom keyframes, shadcn/ui patterns, cva, clsx and tailwind-merge |
| UI primitives | Radix UI (Dialog, Popover, Select, Accordion, Tooltip, Radio Group), Lucide React, Vaul drawers, Sonner toasts |
| Forms | React Hook Form with @hookform/resolvers |
| Animation | Motion for React 13.4: cursor tilt springs, scroll parallax, mood transitions, reduced-motion gating |
| Typography and media | Playfair Display and Inter via Google Fonts, video and imagery streamed from an asset gateway so no media is stored in git |
Questions
Straight answers.
Is Rosestone Hideaway a real holiday let?
No. Rosestone Hideaway is a concept built by Saggar Studio to show what a website for a small holiday let can look like. There is no client and no bookings are taken.
What does the Rosestone Hideaway concept show?
A landing page for a restored stone cottage: a hero with three lighting moods, sustainability cards that tilt with the cursor, a parallax gallery of the rooms and garden, and a booking card with check-in, check-out and guest fields.
What is Rosestone Hideaway built with?
React 19 and TanStack Start with TypeScript 5.8, built with Vite 8 and deployed through Nitro to edge environments. Styling is Tailwind CSS v4 with OKLCH tokens and shadcn/ui patterns on Radix UI, and animation uses Motion for React.
Does the Rosestone animation respect reduced-motion settings?
Yes. The cursor tilt, scroll parallax and mood transitions are gated on the visitor's reduced-motion preference.
Who built Rosestone Hideaway?
Arun Paul, founder of Saggar Studio, a web studio based in Manchester and Stoke-on-Trent.