▲AI coding agent (see tweet)Design

QUARTER ROOM Tamil music website

A full single-page Tamil music-player site built from a reference image. Live at kudimagan.vercel.app.

Loading the original X post…

A full single-page Tamil music-player site built from a reference image. Live at kudimagan.vercel.app.

The prompt

✦AI coding agent (see tweet)

1	Build a complete, production-quality single-page music website inspired by the attached reference image.
2
3	Working title: QUARTER ROOM
4	Tamil title: குவாட்டர் ரூம்
5	Tagline: தமிழ் குடிகாரர்களின் அதிகாரப்பூர்வ ரேடியோ
6	The product is a cinematic Tamil music player for drinking songs, soup songs, breakup songs and late-night Tamil melodies. It should feel like entering a living Tamil street scene, not like browsing another Spotify playlist directory.
7	Technical foundation
8
9	If the repository already has a working frontend, preserve its stack and adapt it.
10
11	Otherwise, use Next.js App Router, TypeScript and Tailwind CSS.
12
13	Keep it as a single-page website.
14	No authentication, database, dashboard, backend or payments.
15	Build clean, reusable components without overengineering.
16	Make the page fully functional, responsive and deployment-ready.
17	Do not stop after producing a rough scaffold.
18	Run the project, inspect the result and fix visual, responsive and console issues.
19	Main experience
20	The entire browser viewport should be a cinematic illustrated Tamil street at evening.
21
22	The composition should resemble the reference:
23
24	Full-screen atmospheric illustrated background.
25
26	A small red Tamil bar/shop at the centre.
27
28	Chennai or Tamil Nadu street architecture.
29	Banana leaves, electric wires, plastic chairs, parked scooter, tea-shop details and warm street lights.
30	A few friends sitting together outside the shop.
31	Deep blue evening sky contrasting with warm red and orange buildings.
32	Subtle grain, texture and imperfect hand-painted details.
33	The interface should feel embedded into the scene.
34	Do not make it look like a standard SaaS landing page.
35	No white cards, feature grids, pricing sections, testimonials or conventional hero layout.
36	Do not copy the reference artwork directly. Create an original Tamil environment using local SVG/vector artwork, CSS layers and gradients.
37	Do not depend on random remote stock images.
38	If a background asset is required, create a polished local SVG illustration and store it inside /public.
39	The page should occupy exactly the viewport on desktop with no unnecessary scrolling.
40	Header
41
42	Place a minimal transparent header over the illustration.
43
44	Top left:
45
46	Live local time in 12-hour format.
47
48	Update automatically every minute.
49
50	Small Tamil Nadu/Chennai location label beneath it.
51	Top centre or slightly right:
52	A small pulsing green dot.
53
54	Text: “LIVE”
55
56	Do not show a fake listener count.
57	Top right:
58	Spotify icon and label.
59
60	YouTube Music icon and label.
61
62	Clicking either changes the active music provider.
63	Clearly indicate the selected provider.
64	Keep the styling minimal and integrated with the scene.
65	Central identity
66	Place the Tamil title prominently on the building:
67
68	குவாட்டர் ரூம்
69
70	Under it, display:
71
72	தமிழ் குடிகாரர்களின் அதிகாரப்பூர்வ ரேடியோ
73
74	The Tamil typography must be large, confident and readable.
75
76	Use a Tamil-compatible font such as Noto Sans Tamil. Pair it with a clean sans-serif font for English text. Ensure font loading does not break the page if the external font fails.
77
78	The title should feel painted or mounted onto the building, not floating randomly in the viewport.
79
80	Music stations
81
82	Create five curated mood stations:
83
84	கடை திறந்தாச்சு
85	Description: “Full TASMAC energy”
86	Mood: energetic red and orange street scene.
87
88	அவள நினைச்சா
89	Description: “Love failure. Full volume.”
90	Mood: darker red with subtle rain and lonely lighting.
91
92	மணி 2:17 AM
93	Description: “Everyone suddenly became silent.”
94	Mood: deep blue terrace or empty late-night street.
95	அவன் நினைச்சா
96	Description: “Soup songs are not just for the boys.”
97	Mood: purple and warm bedroom or bus-window lighting.
98	பழைய சரக்கு
99	Description: “Ilaiyaraaja, Rahman and old wounds.”
100	Mood: dim amber 80s/90s bar atmosphere.
101
102	Add a small “Change mood” button near the music player. Clicking it should open an elegant station selector above the player.
103	Each station card should show:
104	Tamil station name.
105
106	Short English description.
107	A distinct colour.
108	A simple illustrated icon.
109
110	Active station indicator.
111	When the station changes:
112	Crossfade the background colours and environmental overlays.
113
114	Update the station title.
115	Load the corresponding provider playlist.
116	Keep transitions smooth and restrained.
117
118	Do not reload the page.
119
120	On mobile, the station selector can become a bottom sheet.
121
122	Playlist configuration
123	Keep every playlist URL and ID inside one easy-to-edit configuration file such as:
124	src/data/stations.ts
125	Each station should support:
126	id
127
128	nameTamil
129
130	nameEnglish
131	description
132	accentColor
133	backgroundVariant
134	spotifyPlaylistUrl
135
136	spotifyPlaylistId
137
138	youtubePlaylistUrl
139
140	youtubePlaylistId
141
142	Use these public playlists initially:
143
144	கடை திறந்தாச்சு
145
146	Spotify:
147	https://open.spotify.com/playlist/1AcwNZ0zLSPtIOea0uwxaJ
148	YouTube playlist ID:
149	PLxQpegrlImYt1j0PXBEl1-BO3n57kbTDC
150	அவள நினைச்சா
151	Spotify:
152	https://open.spotify.com/playlist/2Yra1CyIYaJ2YNz49yjh4i
153	YouTube playlist ID:
154	PL5Zj_jk7tf5oCbRDVI2noHRi3l4JyL07h
155	மணி 2:17 AM
156	Spotify:
157	https://open.spotify.com/playlist/1uLtum4DGySTEG4LpyCkEW
158	அவன் நினைச்சா
159	Spotify:
160	https://open.spotify.com/playlist/47jt1RZSwPR2WRQpz8VG39
161	பழைய சரக்கு
162
163	Create a clearly marked configuration placeholder so the playlist can be inserted later.
164
165	Never scatter playlist URLs across components.
166
167	Music player
168	Place one floating player at the bottom centre, matching the composition of the reference.
169
170	The player should look like a long translucent pill with:
171	Dark warm glass background.
172
173	Soft blur.
174
175	Thin highlight border.
176	Subtle shadow.
177
178	Rounded ends.
179	Album artwork on the left.
180
181	Song title.
182
183	Artist name.
184	Current station name.
185
186	Previous button.
187
188	Large central play/pause button.
189	Next button.
190
191	Progress bar.
192
193	Current time and total duration.
194
195	Provider indicator.
196
197	“Open in Spotify” or “Open in YouTube Music” link.
198
199	The player should be approximately 620–720px wide on desktop and nearly full-width on mobile.
200
201	Do not build decorative controls that pretend to work.
202
203	Spotify playback
204	Use Spotify’s official embed or iframe API.
205	Load the active station playlist.
206	Connect play and pause actions where officially supported.
207	Display the official embedded player in a compact, visually integrated form.
208	Do not illegally hide mandatory Spotify branding.
209	Do not request a Spotify client secret.
210	If browser or Spotify restrictions prevent a custom control from working, disable that control and rely on the official Spotify embed.
211	Always include an “Open in Spotify” fallback.
212	YouTube playback
213	Use the official YouTube IFrame Player API.
214	Embed playlists using:
215	https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID
216	Connect play, pause, previous, next and progress updates.
217	Use playsinline=1.
218	Do not autoplay with sound before user interaction.
219
220	Add an “Open in YouTube Music” link using the corresponding playlist URL.
221
222	Handle unavailable, private or region-blocked videos gracefully.
223
224	Initial interaction
225
226	Because browsers block autoplay, show a tasteful first-entry overlay:
227
228	Title: ஒரு mood தேர்ந்தெடு.
229	Buttons:
230	கடை திறந்தாச்சு
231	அவள நினைச்சா
232	மணி 2:17 AM
233	அவன் நினைச்சா
234	பழைய சரக்கு
235
236	After the user chooses a mood:
237
238	Close the overlay.
239
240	Set that station as active.
241
242	Begin playback only through the user’s click.
243
244	Remember the selected mood and provider in localStorage.
245	Track information
246	When the provider exposes metadata, show:
247	Track title.
248	Artist.
249
250	Artwork or video thumbnail.
251
252	Current playback position.
253
254	Duration.
255
256	While metadata is loading, use an elegant skeleton state.
257
258	If metadata cannot be retrieved, show the station name and provider without inventing track information.
259	Animation and atmosphere
260	Add restrained ambient animation:
261	Slight movement in banana leaves.
262	Gentle light flicker.
263
264	Occasional passing shadow.
265
266	Slow grain movement.
267	Small smoke or steam effect near the shop.
268	Subtle rain only for the heartbreak station.
269	Very slow background parallax based on pointer movement.
270
271	Player entrance animation after mood selection.
272
273	Animations must remain subtle and should never distract from playback.
274
275	Respect prefers-reduced-motion.
276	Responsive behaviour
277	Desktop:
278	Full illustration visible.
279	Tamil title centred on the building.
280
281	Player at bottom centre.
282
283	Header aligned to the viewport edges.
284
285	Mood selector expands above the player.
286
287	Tablet:
288
289	Preserve the full cinematic composition.
290	Slightly reduce title and player width.
291	Mobile:
292	Use 100dvh.
293	Reframe the illustration vertically instead of merely shrinking it.
294	Keep title readable.
295	Header must not overlap.
296	Player becomes a compact bottom player.
297
298	Station selector opens as a bottom sheet.
299
300	Keep touch targets at least 44px.
301
302	Avoid horizontal scrolling.
303
304	Account for iPhone safe areas.
305
306	Visual standards
307	Use dark red, burnt orange, faded coral, midnight blue, dusty green and warm cream.
308	Avoid neon gradients, generic glassmorphism and overly clean corporate styling.
309	Use glass effects only for the player and small controls.
310	Add subtle paper, film-grain and paint texture.
311
312	Maintain strong text contrast.
313
314	Keep every text element deliberately positioned.
315	No words should appear randomly around the screen.
316
317	Avoid oversized empty areas.
318
319	All alignment should follow a consistent visual grid.
320	The experience should look intentional at 1440px, 1024px, 768px, 430px and 375px widths.
321	Accessibility and quality
322	Use semantic HTML.
323	Add accessible labels to every control.
324	Support keyboard play/pause using the spacebar when focus is not inside an interactive element.
325	Add visible focus states.
326	Ensure the station selector can be navigated by keyboard.
327	Escape should close overlays.
328
329	Avoid hydration errors.
330
331	Avoid console warnings.
332	Lazy-load provider embeds where possible.
333	Do not expose API keys.
334	Add error and empty states.
335	Add a small responsible drinking line in the bottom corner:
336	“Drink responsibly. இசை மட்டும் unlimited.”
337	Metadata
338	Page title:
339	Quarter Room \| Tamil Soup Radio
340	Description:
341	Tamil drinking songs, soup songs and late-night heartbreak playlists in one cinematic radio experience.
342
343	Create a simple matching favicon using the Tamil letter “கு” or a quarter-glass silhouette.
344
345	Final acceptance criteria
346	The work is complete only when:
347	The page feels visually close in quality and atmosphere to the supplied reference.
348	It is an original Tamil street illustration.
349	A user can select a mood.
350	Spotify playlists load correctly.
351	YouTube playlists load correctly where IDs are provided.
352	Provider switching works.
353	Player controls work wherever supported by the official APIs.
354	Playback restrictions are handled honestly.
355	The selected station persists after refresh.
356	The page works on desktop and mobile.
357	There are no broken controls, random text placements, layout overflows or console errors.
358
359	The site looks like a finished cultural music experience, not a template.
360
361	Build the complete implementation now. Do not return only a plan. After implementation, run the application, test every interaction and refine the visual alignment until it is polished.

What this prompt is good for

Visual direction

Moodboards, style guides, and design briefs

Marketing creative

Hero artwork and high-converting visual assets

Brand identity

Consistent aesthetics across typography and form

Rapid prototyping

Iterate variations in seconds with precision

Similar prompts

View all

Original X post