Atyuttama Living: Adapting a Reference Without Losing Its Character

Atyuttama Living began with a specific brief: take the visual language of the 21Oaks residential website, study how it behaves, and reproduce that experience in a local Next.js build. The accepted direction later became an Atyuttama-branded concept with a warmer palette. This is a reference adaptation and implementation study, not an original property brand or a commissioned client project.

The reference was more than a screenshot

A static hero image captures only part of a website. The reference combines room selection, a lamp-light control, scroll-driven gallery scenes, apartment cards, and a floating navigation bar. Those details change the pace of the page. Our initial work therefore examined desktop and mobile behavior as well as the arrangement of images and text.

The implementation uses the reference sections inside a Next.js page, with the existing styles and animation libraries loaded locally. React renders the content; the retained runtime drives the established interactions. Describing this as a complete component-by-component redesign would be inaccurate. Its value is in migration, adaptation, and testing the resulting experience.

A redesign can miss the brief

During the project we explored a broader creative-portfolio direction. It changed the content hierarchy, image language, and composition. That version was rejected because the original experience was what mattered. We restored the previous implementation and narrowed the change to color and context. The lesson was practical: a request for new branding does not automatically authorize a new visual system.

Changing identity with a small visual footprint

The accepted palette replaces lavender with terracotta accents and soft ivory. Typography, room imagery, section order, and motion remain part of the reference language. We changed the names and location copy, removed the original property contact and booking destinations, and described the site as a residential showcase. Sample rates and spaces are illustrative; the demo does not accept rental applications.

Copy length matters in a tightly composed layout. Longer phrases introduced extra lines on small screens, so we shortened them instead of changing the underlying geometry. That kept the identity update close to the experience the brief asked us to preserve.

Test the result, not just the build

The production build passed. Browser checks at desktop and mobile widths covered room selection, menu behavior, local navigation targets, and horizontal overflow. We also inspected the hero and footer visually. These are bounded checks: they do not establish identical behavior on every browser or physical device, and the embedded in-app browser had a media-playback limitation during local testing.

Be precise about what the portfolio demonstrates

The original design and imagery come from 21Oaks, whose site credits Artemii Lebedev. Exposure is the retained typeface. A color change, a framework migration, or a font-format conversion does not turn third-party material into original assets. The case study credits the reference and focuses on the work performed: implementation, restrained adaptation, and responsive verification. A commercial client version would need its own content and appropriately licensed assets.

The finished concept is useful as a conversation starter. It lets someone experience the pacing, explore the rooms, and discuss what a similar interaction approach could do for their own website. The work page explains the process; the demo shows the behavior.