ujja

Posted on Aug 15

Rasa — Turning Ayurveda’s Six Rasas Into CSS Art

#frontendchallenge #devchallenge #css #react

Frontend Challenge CSS Art Submission 🍲🥧

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

What does comfort food look like when you don't use food photography?

That was the question behind Rasa.

Rasa is an interactive culinary atlas exploring India through Shadrasa, the six tastes described in Ayurveda:

Madhura — sweet
Amla — sour
Lavana — salty
Katu — pungent
Tikta — bitter
Kashaya — astringent

I wanted to turn those six tastes into something visual rather than simply presenting them as text or cards.

The result is a tongue-shaped interactive map.

One important clarification: the familiar "tongue taste map" is scientifically inaccurate. Taste receptors are distributed across the tongue. In Rasa, the tongue is purely a cultural and artistic navigation metaphor, not an anatomy diagram or medical claim.

The idea was to make something that felt like opening an old food journal rather than browsing a database.

The CSS Art

The tongue is probably the most obvious piece of CSS art in the project.

It isn't an image.

It is a layered CSS illustration with:

Six selectable rasa regions
3D perspective and depth
Pointer-responsive lighting
Pan and zoom
Keyboard navigation
Papillae and surface texture
A median sulcus
Subtle veins and mucosal variation
Rim lighting
Subsurface colour
Counter-scaled labels that remain readable while zooming

The tongue can be explored almost like a little map.

Select a rasa and the camera moves towards that region, revealing the corresponding field notes.

That interaction was important to me.

I didn't want the CSS art to be something you simply look at.

I wanted it to become part of the interface.

Making Food Without Food Images

The other fun constraint was food itself.

Instead of using food photography, every dish has a small declarative plate-art recipe.

The renderer combines things such as:

Vessel
Food form
Colours
Garnishes
Texture
Lighting
Serving temperature

The renderer supports vessels including thalis, plates, bowls, kadhais, clay pots, banana leaves and leaf cones.

Food forms include rounds, stacks, curries, grains, crescents, cones, cubes and strands.

CSS then adds details such as oil sheen, highlights, contact shadows, steam, heat haze, condensation and cold mist.

So a dish isn't a static illustration.

It is data that becomes an illustration.

That was one of my favourite parts of building Rasa.

Making CSS Feel Less Like CSS

A lot of the work was experimenting with the things CSS is surprisingly good at:

gradients + shadows + transforms + masks + pseudo-elements + 3D transforms

Individually, none of those are particularly exotic.

Combined carefully, they can start to feel much closer to illustration.

I also added a small layer of atmospheric "ingredient wind" across the site.

Different rasas get their own ingredient:

Jaggery for sweet
Mango leaf for sour
Salt crystal for salty
Chilli for pungent
Neem leaf for bitter
Jamun for astringent

The ingredients drift across the page like leaves in a breeze.

It is intentionally subtle.

It can also be paused, disappears in forced-colour mode, and respects reduced-motion preferences.

CSS Art With a Purpose

One thing I wanted to avoid was making a collection of pretty CSS experiments that didn't actually help the user.

The visual language is tied to the content.

The tongue represents the six tastes.

The plate art represents the food.

The notebook changes atmosphere depending on the dish.

Hot dishes introduce warmth, steam and heat shimmer.

Chilled dishes introduce condensation, frost and cool mist.

Festival dishes receive restrained gold details.

Street food gets a subtle field-stamp treatment.

The visual effects are therefore part of the storytelling rather than decoration added afterwards.

84 Dishes Instead of Six

The six tastes are only the entry point.

Rasa contains 84 dishes, with 14 primary dishes for each rasa, covering all 28 Indian states and multiple Union Territories across eight culinary macro-regions.

The dataset intentionally goes beyond the usual shorthand for Indian food.

There are:

Everyday meals
Breakfasts
Snacks
Street foods
Festival foods
Temple foods
City specialities
Folk and Adivasi traditions
Fermented foods
Coastal cuisines
Mountain cuisines
Sweets
Drinks
Pickles
Breads
Rice dishes
Curries
Preserved foods

The goal was breadth rather than stereotype.

The Technical Side

Rasa is built with:

React 18
TypeScript 5.7
Vite 6
Tailwind CSS 4
Framer Motion
Lucide React
DiceBear Open Peeps
Playwright
axe-core

The application is data-driven.

The six rasas, dishes, regions, festivals, spices and guides are represented as domain models rather than being embedded directly into components.

That makes the CSS renderer reusable.

A Dish can describe what something is, while its PlateArt recipe describes how it should look.

That separation made it much easier to keep adding dishes without creating a new component for every food.

Accessibility Still Applies to CSS Art

One of the interesting challenges was making something visually experimental still behave like a normal application.

The map is keyboard-operable.

The rasa tabs use a roving tab index.

Interactive controls have accessible names and 44 × 44px minimum targets.

There is a skip link.

Notebook page changes are announced to screen readers.

The experience supports reduced motion, persistent motion controls, forced colours, 200% zoom and 320px reflow.

I also added automated Playwright + axe checks across desktop and mobile journeys.

Automated accessibility testing isn't a claim that everything is automatically accessible. Manual testing is still needed, particularly for reading order, cognitive clarity and assistive-technology behaviour.

What I Learned

The biggest lesson was that CSS art becomes much more interesting when it has a job.

It is tempting to ask:

"How can I make this look cool with CSS?"

A better question turned out to be:

"What should this visual communicate?"

Once the answer was clear, the implementation became much easier.

The tongue needed depth because it was a map.

The food needed texture because it represented serving and preparation.

The notebook needed page turns because the content was designed as a field journal.

The motion needed to communicate state instead of simply moving things around.

That became one of the design principles for the entire project:

Motion should explain state or create atmosphere, never prevent reading.

Demo

🍛 Try Rasa: https://rasa-mu.vercel.app/

The source code is available on GitHub:

ujjavala / rasa

Rasa — The Tongue Map of India

An interactive culinary atlas that explores India through Shadrasa, Ayurveda's six tastes: sweet, sour, salty, pungent, bitter, and astringent.

Rasa is a React experience built for the DEV Frontend Challenge themes CSS Art: Comfort Food and Perfect Landing: Comfort Food. It combines an editorial landing page, a zoomable CSS-art tongue map, character-led exploration, regional food history, and a page-turning field notebook containing 84 dishes from across India.

Important: the familiar “tongue taste map” is scientifically inaccurate. Taste receptors are distributed across the tongue. This project uses the tongue only as a cultural and artistic navigation metaphor for the six rasas; it is not an anatomy chart or medical guidance.

Why this project exists

Indian food is often flattened into a small set of restaurant dishes. Rasa was created to show a wider table: home cooking, street food, temple food, festival dishes…

View on GitHub

Youtube link: