DEV Community: melik bağrıyanık

Demlik — a Turkish Tea House Landing Page

melik bağrıyanık — Sat, 15 Aug 2026 20:07:10 +0000

This is a submission for Frontend Challenge: Comfort Food Edition, Perfect Landing: Comfort Food.

Inspiration

Demlik — the word means "teapot" — is a Turkish tea house that exists only in my head: four tables, one wood stove, a cat named Poğaça, and Black Sea tea brewed the slow way — twenty minutes, two pots, no shortcuts. It's every neighborhood tea house in Türkiye at once, and the landing page tries to feel the way those places feel: warm, unhurried, and a little playful.

(It's the companion piece to my CSS Art submission — same tea, different discipline.)

Demo

https://codepen.io/melik-baryank/pen/XJpwLap

Things to try:

Watch the hero on load — the copy rises line by line, the glass fills with tea, the steam starts only after the pour, and an underline draws itself beneath the last word.
Scroll — sections reveal with staggered timing, and in Chromium the hero art drifts with a scroll-driven animation (animation-timeline: scroll(), wrapped in @supports so other browsers gracefully skip it).
Hover a menu card — it lifts, a light sweep crosses it, and the dish icon wobbles.
Toggle dark mode — colors cross-fade smoothly, the choice persists, and with no choice made the page follows your system preference.
Tab through the page — skip link, visible focus rings, and a keyboard-friendly mobile menu (Escape closes it).
Check the opening hours — today's row is highlighted with a pulsing dot and marked with aria-current="date".
Submit the form empty or with a typo — accessible inline errors via aria-describedby/aria-invalid; success pops in and is announced through a polite live region.
Hover the scrolling ticker — it pauses. Hover the cat fact — 🐾.

Journey

One HTML file, no frameworks, no build step: semantic HTML, vanilla CSS and ~70 lines of JavaScript.

Accessibility first. Landmarks, a skip link, :focus-visible rings on everything interactive, an hours table with caption and scope, form errors in a role="alert" region wired with aria-describedby + aria-invalid (so they're announced even on an Enter-key submit), success in a polite role="status" region, and aria-pressed on the theme toggle. Every dish is named in English first with its Turkish original beneath, and those originals carry lang="tr" so screen readers switch pronunciation instead of mangling them — nothing on the page is left untranslated for an English reader. Closing the mobile menu with Escape returns focus to the button that opened it. The auto-scrolling ticker is pausable by keyboard focus, not just hover (WCAG 2.2.2), and lists that lose their markers keep role="list" for VoiceOver. Button and badge foregrounds are theme tokens (--on-brand, --on-accent) so text contrast clears WCAG AA in both palettes — checked, not assumed. Every animation on the page — steam, drifting bread ring, ticker, reveals — is disabled under prefers-reduced-motion.

Theming. Design tokens as custom properties, defined light-first. Dark mode comes in three layers: system preference by default (prefers-color-scheme), an explicit data-theme override from the toggle, and localStorage to remember the choice. The moon-cutout icon on the toggle only appears when dark is actually active.

The hero illustration. A tulip glass, saucer, steam, and a sesame bread ring — all CSS gradients and clip-paths, no images. The sesame seeds are stacked radial-gradients positioned in percentages, so they scale with the ring at every viewport size.

Motion design. The page opens with a choreographed hero: staggered fade-up entrances, a tea-fill (scaleY from the bottom, so the gradient surface rides up), delayed steam, and a self-drawing underline. Scroll-driven parallax on the hero art is a pure progressive enhancement — animation-timeline: scroll() behind @supports, so Firefox and Safari simply see the static composition. Menu-card light sweeps animate background-position instead of a transformed overlay, so nothing leaks outside the rounded corners. And every single one of these — entrances, sweeps, pulses, parallax — is disabled under prefers-reduced-motion, with end-states baked into the base styles so nothing gets stuck invisible.

Little UX touches. Today's opening hours highlighted (with a pulsing "open" dot) via one line of JS and one CSS attribute selector; a chalkboard-style dotted leader between dish and price; the ticker duplicated once so the loop is seamless; scroll reveals via IntersectionObserver that unobserve after firing; the header grows a shadow only once you've scrolled.

Code quality. BEM-ish class names, tokens for every color and radius, one commented section per component, and JSON-LD (CafeOrCoffeeShop) in the head — Demlik may be fictional, but its markup takes itself seriously.

Afiyet olsun! 🫖

Çay & Simit — a Turkish Tea Break in Pure CSS

melik bağrıyanık — Sat, 15 Aug 2026 20:01:23 +0000

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

Inspiration

For me, comfort food isn't a dish — it's a ritual. A tulip-shaped glass of çay (Turkish tea), brewed dark "tavşan kanı" (rabbit's blood red, as we say), served on a red-and-white saucer with two sugar cubes, and a simit — the sesame-crusted bread ring sold on every street corner in Türkiye. It's breakfast, it's a work break, it's what you're offered the moment you walk into someone's home.

I wanted to see how close I could get to a photograph of that moment using nothing but HTML and CSS. No images, no SVG, no data URIs, no icon fonts — every pixel is gradients, shadows, masks, and clip-paths.

Demo

https://codepen.io/melik-baryank/pen/OPWYegq

When the scene loads, a porcelain demlik (teapot) floats in, tilts, and pours the tea in front of you — the glass fills from empty, the level speeding up through the narrow waist and slowing in the wide sections, exactly like a real pour. Only when the teapot leaves does the steam start to rise.

Then the scene becomes a playground — little call-out labels point straight at each prop, and every prop keeps glowing until you've tried it:

🧊 Click a sugar cube — it tumbles through the air in a real parabolic arc, plops through the glass mouth, rings the surface, and fizzes as it dissolves.
🥄 Click the spoon — it lifts off the saucer, dips into the glass, stirs (watch the surface swirl), and settles back where it was.
🥯 Click the simit — it shakes and sheds a few sesame seeds onto the table.
⟳ "brew again" re-brews everything from the empty glass, and moving your mouse tilts the whole scene in subtle 3D.

Every pixel and every movement is CSS. JavaScript never animates anything — it's a small orchestrator that only adds and removes classes; with JS off or prefers-reduced-motion on, you simply get the finished, steaming still life.

Journey

The whole scene is one HTML file: ~1050 lines of CSS and a ~15-line script. Everything is sized in em, so a single font-size: clamp(...) on the scene scales the entire artwork responsively.

The parts I'm most proud of:

The pour choreography. The entire opening sequence — teapot in, pour, fill, teapot out, steam up — runs on a single 9-second CSS animation duration shared by every element. Each element encodes its own action window as keyframe percentages, so everything stays in perfect sync with zero JavaScript timing code. The tea level's keyframes are sampled from the same Bézier polygon as the glass silhouette: the surface ellipse animates its top/left/width through the glass profile, and the fill accelerates through the narrow waist and slows in the wide bulb — the constant-volume illusion. The stream inside the glass shrinks with a synchronized scaleY, so it always ends exactly at the rising surface. And because the static CSS is the final frame, the .play class only describes the journey: no JS (or reduced motion) means you just see the finished glass.

The tulip glass (ince belli bardak). The silhouette is a pair of polygons sampled from Bézier curves — one for the outer wall, one for the inner. The glass wall itself is cut with clip-path: polygon(evenodd, ...): the outer path minus the inner path leaves just the glass "flesh". A third even-odd pair creates the dark band where the tea touches the wall. Inside the glass, backdrop-filter: blur() saturate() refracts whatever is behind it, like real glass does.

The simit twist. A simit isn't just a torus — the dough is rolled and twisted, so the ridges spiral. I built it from 7 repeating-conic-gradient strips, each masked to a thin radial band, with the conic phase (from angle) advancing as the radius grows. Ridges that shift angle with radius read as a spiral twist. On top of that: 325 sesame seeds and ~120 crust-bubble highlights/shadows, all layered box-shadows in three tone groups. The whole ring lies flat on the table: a scaleY(.54) perspective squash, plus a second copy of the ring shifted down and cut to its bottom half (the ring via mask, the half via clip-path — engine-proof, no mask-composite required) for the visible front wall, and a dark crescent inside the hole for the far inner wall.

Making the interactions discoverable. Interactive CSS art has an obvious problem: nothing tells you it's interactive. So each prop announces itself — a hairline leader line runs from a small label ("drop sugar", "stir", "shake") to the thing it names, the props take turns pulsing with a warm drop-shadow glow, and hover or keyboard focus answers with the same glow. Each call-out and its glow retire the moment that prop is used (one used-* class), so the scene quietly returns to being a photograph once you've explored it.

The interactions. Sugar, spoon and simit are real <button>s (keyboard-accessible and labelled), but the physics is pure CSS. The sugar throw is a genuine parabola from two composed animations: linear X on the button, gravity-eased Y on the cube inside it — no JavaScript math anywhere. The stir is one long keyframe track (lift → two circular laps → settle) with a conic-gradient vortex spinning inside the surface ellipse, clipped by overflow:hidden. JS is only an orchestrator: it toggles classes and resets state on replay.

Depth of field. The café background is blurred with a masked backdrop-filter strip near the horizon, so the subject stays sharp while the background falls out of focus — the CSS version of a wide aperture.

The saucer. Circles flattened with transform: scaleY(.32) to fake perspective. The scalloped red rim is 54 box-shadow circles placed on a ring; the tick patterns are repeating-conic-gradients masked to thin annuli; the warm glow the tea casts on the porcelain is a pair of mix-blend-mode: screen radial gradients.

The wood table. Six stacked repeating-linear-gradients at slightly different angles for grain, a hand-tuned gradient for plank seams that get denser toward the horizon (perspective!), multiply-blended radial gradients for knots, and a sub-pixel dot grid for pores.

The finishing pass. Like a photo, the scene gets a color grade (vignette + warm lift) and a very faint film grain overlay — two full-scene layers that pull everything together.

Accessibility. The scene is a role="group" with a descriptive aria-label, and every interactive prop inside it is a real, labelled <button> you can reach with the keyboard. The replay control lives outside the scene, and under prefers-reduced-motion every animation — pour, sugar, stir, ambient light — is replaced by the finished still frame.

What I learned: box-shadow is a particle system, repeating-conic-gradient is a lathe, and the even-odd fill rule is the closest thing CSS has to boolean geometry. And that I can't look at this piece without craving a simit.

Afiyet olsun! 🫖