开发者
🍜 “Steam & Soul — A Bowl Written in CSS” ⭐
<!DOCTYPE html> Steam & Soul — A Bowl Written in CSS * { box-sizing: border-box; margin: 0; padding: 0; } :root { --wood1: #3b1710; --wood2: #71351f; --wood3: #a9572d; --red1: #43050c; --red2: #86101a; --red3: #d72b28; --broth1: #721006; --broth2: #c9330d; --broth3: #ff9228; --noodle1: #fff2ad; --noodle2: #ffd35c; --noodle3: #a95e1d; --gold: #ffbe42; } body { min-height: 100vh; overflow: hidden; display: grid; place-items: center; background: radial-gradient( circle at 50% 32%, #fffdf4 0%, #ffe9c7 28%, #e9a269 65%, #864029 100% ); font-family: Inter, Arial, sans-serif; } /* ===================================================== SCENE ===================================================== */ .scene { position: relative; width: 800px; height: 800px; perspective: 1100px; cursor: pointer; animation: floatingScene 7s ease-in-out infinite; } @keyframes floatingScene { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ===================================================== TITLE ===================================================== */ .title { position: absolute; top: 30px; left: 0; width: 100%; text-align: center; color: #641f12; font-size: 36px; font-weight: 950; letter-spacing: 10px; text-shadow: 2px 2px 0 #ffd99e, 0 8px 20px rgba(70,20,0,.15); z-index: 200; } .subtitle { position: absolute; top: 82px; width: 100%; text-align: center; color: #8b4a2d; font-size: 11px; font-weight: 700; letter-spacing: 5px; z-index: 200; } /* ===================================================== LIGHT ===================================================== */ .light { position: absolute; left: 50%; top: 170px; width: 550px; height: 420px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(255,220,150,.4), transparent 68% ); filter: blur(20px); animation: lightPulse 5s ease-in-out infinite; z-index: 0; } @keyframes lightPulse { 0%,100% { opacity: .55; } 50% { opacity: .9; } } /* ===================================================== TABLE =======
安全
Stop using the localStorage hack to sync browser tabs. BroadcastChannel does it natively.
When a user logs out in one tab, the other tabs should follow. When they update their cart, every...
AI 资讯
Egusi Soup. One Bowl, One Checkbox, Zero JavaScript
This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration Egusi soup with pounded yam. Jollof gets the headlines, but egusi is the quiet one that actually holds Nigerian homes together. Melon seeds, ugu, palm oil, and a dome of pounded yam you eat with your hands. I already sent this challenge a love letter to jollof for the Perfect Landing prompt. This is the companion piece, and it targets a different audience: not a flat poster, but a photograph with real depth. The entire table sits in a single CSS perspective plane, so the bowl is genuinely a bowl. You look down into it. Demo A morsel of pounded yam is resting on top of the dome. Press "Dip the yam" and watch it lift off, cross the table, drop into the soup and come back stained. No JavaScript anywhere near it. Journey The rule I set myself: zero JavaScript. The one interactive moment runs on a checkbox and a sibling selector. The checkbox stays keyboard focusable, the label carries a visible focus ring, and if you've asked your system for reduced motion, the morsel skips the flight and just shows up stained. The whole scene is sized in container query units, so it scales as one object from a phone to a desktop without a single media query for layout. Some of the tricks I'm proud of: The table is one plane with transform-style: preserve-3d and a rotateX , so everything standing on it uses translateZ to mean "up off the table" The bowl is six rings flaring up the Z axis. The top two are masked hollow, otherwise, they paint straight over the soup, and the whole thing reads as a solid disc. That bug is what taught me the technique The soup sits below the rim on the Z axis, so you see the inner wall and the shadow it throws across the curds The pounded yam is six contours stacked into a dome, each one a little brighter as it climbs toward the light The egusi curds are eleven stacked radial gradients, the palm oil pools at the rim through an inset shadow, and the oil sheen is a blurre
开发者
I Know the Recipe. I Miss the Winter Kitchen.
This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. ...
AI 资讯
Biryani CSS Art — India's Soul in Every Grain 🍛
This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration I chose to build a classic Dum Biryani — the ultimate comfort food! 🍛 There is nothing quite like opening a steaming handi of biryani and seeing the rich, saffron-colored rice dotted with fried onions, mint, and spices. It's a dish that brings people together and feels like a warm hug, making it the perfect inspiration for the Comfort Food challenge. Demo Here is my CSS Art representation of a traditional Biryani Handi! I built this primarily using vanilla CSS to create the realistic clay texture of the pot, the individual grains of rice, the steam animations, and the garnishes. I added a tiny bit of JavaScript just for a subtle mouse-parallax tilt effect and a saffron sparkle when you click the pot. https://github.com/pandeynitish23/dev_css_chalange/ https://dev-css-chalange.nitishkumar-nk-np.workers.dev/ Journey Building this was a really fun exercise in CSS gradients and positioning! What I'm most proud of: The Clay Handi: I used layered radial and linear gradients along with inset box shadows to give the pot a realistic, 3D clay texture with lighting highlights. The Rice & Garnishes: Creating individual rice grains, mint leaves, and onion crisps using CSS border-radius and positioning was tedious but incredibly rewarding when it all came together. The Atmosphere: Adding animated steam and floating background spice particles helped bring the scene to life and make it feel hot and fresh. It was a great challenge keeping the JavaScript minimal and relying on pure CSS for the heavy lifting of the art itself!
AI 资讯
The SVG Color Cascade Nobody Explains (fill, stroke, currentColor, and why img src breaks it)
Change an SVG's color by editing fill and stroke , either as attributes or through CSS. Simple in theory. In practice there are three places a color can be declared in the same file, they follow the normal CSS cascade, and if you don't know that, "I changed the fill and nothing happened" turns into a twenty-minute debugging session. Here's the part of SVG color handling that usually doesn't get spelled out. fill and stroke are separate properties Every shape has an inside ( fill ) and an outline ( stroke ), set independently: <circle cx= "50" cy= "50" r= "40" fill= "#3366ff" stroke= "#000" stroke-width= "2" /> Unset fill defaults to black. Unset stroke defaults to none. If an icon is pure fill with no stroke at all (most converted icon-font SVGs are), editing stroke-width is never going to do anything visible, and that's usually the first dead end people hit. The cascade is the actual bug source A color can come from three places, and they don't have equal priority: A presentation attribute: <path fill="red" /> An inline style attribute: <path style="fill: red;" /> A <style> block or external stylesheet: path { fill: red; } Normal CSS specificity applies: style attribute beats stylesheet, stylesheet beats presentation attribute. Edit the fill="red" attribute directly, and if a <style> block elsewhere in the same file also targets that path, your edit is overridden and nothing changes on screen. No error, no warning, it just loses. If a color edit isn't sticking, grep the file for <style before assuming your tool, or your edit, is broken. This one thing accounts for most "the SVG editor is buggy" reports that are actually the cascade working exactly as designed. currentColor: SVG's inheritance trick Set fill="currentColor" and the shape stops carrying its own color and instead inherits whatever color is set to on an ancestor element, the same mechanism that makes text inherit color: <path fill= "currentColor" d= "..." /> .icon { color : #ff0000 ; } <span class= "icon
AI 资讯
Sobremesa: Six meals in Mexico, heritage without an address.
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing Mexico is our heritage. Yet, we have no family there to visit. That sounds sadder than it is. What it actually meant, for the years before my wife and I were married and most of our time off since, is that we had to go find it ourselves. No family kitchen waiting. No grandmother's recipe with an address attached. Just the two of us and a country that is ours and that we did not know. So we did what every hungry person in a new city does...we ate. Six cities, six completely different cuisines, and somewhere in there it stopped feeling like traveling. A tlayuda from a stand outside Santo Domingo in Oaxaca. An hour in line at El Yaqui with a michelada in Rosarito. Different food every time. Same feeling every time, and there is no English word for that feeling. There is a Spanish one. What I Built Sobremesa is the time you stay at the table after the food is gone, still talking. Not the meal. The part after the meal. That is the whole site. Six meals across six Mexican cities, and the thing it measures is not how good the food was. It is how long we stayed. Tijuana, one hour. Rosarito, two. Ensenada, one. Guadalajara, ninety minutes. Mexico City, two hours. Oaxaca, two. The page adds them up at the end. Nine hours and thirty minutes at six tables. Comfort food usually means a kitchen you can go back to. We do not have one over there. So the six tables became it. The stand at Plaza Santo Domingo is the family table. The hour in line at Tacos El Yaqui is the Sunday afternoon table. Each entry has the dish, where we ate it, one verified fact about the food, and one line that is just ours, from our experience. There is a form at the bottom where you add your own table and download a card of it, generated in your browser. Nothing gets sent anywhere. One static HTML file. No framework, no build step, no tracking, no cookies, no storage. Two fonts off Google Fonts and nothing else. Designed an
AI 资讯
Your first Fitz LiveViews component, twice: SSR and WASM from one source
TL;DR — A Fitz LiveViews component is a single .fitzv file. The interesting part: the same file compiles to two different targets with no rewrite. Server-rendered (SSR) — the server holds the state, renders HTML, and patches the browser over a WebSocket; best for shared, DB-driven, multi-user state. Client-WASM — the same component compiles to WebAssembly and runs entirely in the browser; best for offline, zero-round-trip widgets. This post builds a counter and ships it both ways. (Part 2 of the FitzLiveViews series — start here if you missed part 1.) In part 1 I made the pitch: real-time UI in one language, no JavaScript build. Now let's build something and ship it two ways from the same source. The component Here's a counter as a single-file component ( .fitzv ) — state, events, template, style: component Counter { state { count: Int = 0 } event increment() { count = count + 1 } event decrement() { count = count - 1 } event reset() { count = 0 } <template> <div id= "counter-app" > <p> Count: {count} </p> <button @ click= "increment" > +1 </button> <button @ click= "decrement" > -1 </button> <button @ click= "reset" > Reset </button> </div> </template> <style scoped > #counter-app { padding : 1.5rem ; font-family : system-ui ; } button { padding : 0.5rem 1rem ; margin : 0 0.25rem ; } </style> } state is the reactive data. Each event handler mutates it directly — no setState , no reducers. <template> is real markup; {count} interpolates and auto-escapes. @click="increment" binds a DOM event to a handler. <style scoped> is CSS namespaced to this component. If you've written Vue or Svelte, this is familiar — the difference is what happens next. Target 1 — server-rendered (over a WebSocket) The SSR target is the default. The component runs on the server; a tiny main.fitz wires it into an HTTP route (first paint) and a WebSocket route (the live layer): from fitz_liveviews import html_response , live_layout , LiveFrame , diff_html , component , dispatch_component_events
开发者
This is a submission for [Frontend Challenge - Comfort Food Edition, Perfect Landing] 😊
What I Built Gnoke Books works like an actual printed magazine on a table — you grab the...
AI 资讯
How to Build a Serverless, Zero-Database Web App for 100k+ Users Using Client-Side Image Processing
As software engineers, our default setting is often to over-engineer. When tasked with building a web utility—such as an image sorter or a layout planner—our minds immediately jump to designing a complete backend ecosystem. We start sketching out PostgreSQL schemas, configuring AWS S3 bucket lifecycles for user uploads, setting up Redis caches, and writing authentication middleware. While this architecture is robust, it introduces massive overhead: Financial Cost: Database queries and S3 egress fees scale with your user base. Maintenance Burden: Keeping server packages updated, managing API endpoints, and handling database backups. Legal Compliance: Storing user-uploaded files means dealing with GDPR, CCPA, and data privacy regulations. When I started building Rankly, an online Tier List Maker, I challenged myself to eliminate the backend entirely. I wanted to build a high-performance web tool capable of scale, with a server hosting bill of exactly $0/month, while giving users complete privacy. Here is a technical deep dive into how we built a stateless, zero-database frontend architecture that processes complex image grids entirely client-side. Traditional tier list tools follow a client-server-client round-trip pattern: User uploads images -> Sent to server. Server saves to S3 -> Returns public URLs. User drags/drops -> State saved to database via JSON payload. Export -> Server-side headless browser (like Puppeteer) renders the page and takes a screenshot -> Sent back to user. This pattern is slow and highly resource-intensive. Rankly completely bypasses the server by implementing an entirely local-first rendering pipeline. [Local File Upload/Drag] │ ▼ (FileReader API / Object URL) [Local Memory State (React/State)] ───► [Interactive Grid UI (Tailwind)] │ ▼ (HTML5 Canvas Synthesis) [Local Client-Side Render] ───► [High-Res PNG Download] To let users use their own images without uploading them to a remote server, we utilize the HTML5 File API. When a user drags and
AI 资讯
CSS Challenges for 200 IQ
Do you ever get that feeling when you’re working on a task, hit a wall with some problem, and something inside you whispers that there has to be a solution? When it seems like all is lost, like you’ve run into a fundamental limit of reality, but your refusal to accept it keeps driving you deeper into spec docs, 10-year-old GitHub threads, and articles from giants who’ve already blazed this trail and shared their findings? And then, after hours of intense brain-grinding, you add that final line of code, refresh the page, and there it is — the exact result you wanted, staring back at you from the screen? That rush of success is probably familiar to every engineer in some form or another. In those moments, I always want to share the win with my colleagues and, if it could help others, write an article about it. In this post, I’ve collected 3 such cases from our work where we came up with solutions that, as far as I know, are pretty unique and haven’t been fully documented before. I invite you to share in the joy of discovering a solution that seemed impossible! Fixed inside a Scroll Container For a warm-up, let’s take an easier task. One of my most popular CodePens is an example of a fixed block inside a scrolling container. People find it via Stack Overflow answers, so it’s an in-demand problem, so it might come in handy for you too. I’ve been working on an Angular component library called Taiga UI for many years. Everything I’ll talk about in this article comes from there, but that’s just the backstory. We won’t need Angular or any of its specifics here. We’re talking pure CSS. Our library uses a custom scrollbar. While modern browsers let you tweak its appearance a bit , for full control over behavior and visuals, we need to place our own elements inside the container to act as the scrollbar. But how do you do that when absolutely positioned elements fly to the top on scroll, and fixed-position ones are pinned to the viewport? Experienced devs will immediately think
AI 资讯
CSS Doesn't Throw: One Mistyped Comment Closer Silently Ate 15 Lines of My Stylesheet
Originally published on hexisteme notes . Every test passed. The page was in pieces. I was rebuilding a small internal dashboard — FastAPI, Jinja2 templates, hand-written CSS, no build step — and the layout had come apart. Timeline rows unstacked into a vertical column. Status dots floated free of their rows. Log group labels overlapped. It looked exactly like a page whose stylesheet had failed to load. The stylesheet had loaded. All 481 tests in the suite were green. And when I grepped the CSS file for the rules that were obviously not being applied, they were sitting right there on disk, correctly written. The cause was a comment closer. Somewhere in the middle of the file, a /* had been closed with #} — Jinja's comment terminator — instead of */ . Muscle memory, from switching back and forth between .html templates and .css . CSS then did precisely what the specification tells it to do: it kept reading. The comment ran on and swallowed the next 15 lines of rules — the timeline-row grid, the feed, the bucket layout, the dot alignment — until it hit the next real */ , seventeen lines down. No error. No console warning. No failing test. The rules were present in the file and absent from the page at the same time. The typo is the least interesting part. What's worth keeping is why CSS is designed to fail without symptoms, why source-level review cannot see it, and why the fix is a two-line assertion rather than more care. Why nothing complained: CSS has no fatal errors The CSS Syntax specification defines comment consumption like this: on seeing /* , consume everything "up to and including the first */ , or up to an EOF code point." No notion of a comment being too long, no heuristic about blank lines or braces, no upper bound. First */ wins. A comment closed seventeen lines later than intended is not a malformed comment — it is a well-formed comment that happens to be seventeen lines long. The parser has no way to know you meant something else. Even if the comment h
AI 资讯
Liquid Glass on the Web: 6 Ways to Build It with CSS and SVG
Apple shipped Liquid Glass across iOS 26 and macOS, and suddenly every product I look at has a frosted panel floating over something. I spent a few weeks rebuilding the effect properly for a project, and most of what I found online stops at one line: backdrop-filter : blur ( 16 px ); Which gives you a gray rectangle. That's not what makes Apple's version look like glass, and figuring out the difference took me longer than it should have. So here are the six techniques I ended up with, roughly in order of how well they're supported, along with the things that wasted my time. 1. The plain glassmorphism card Everyone knows this one, but there are three parts to it and most implementations ship only the first. .glass-card { position : absolute ; inset : 20% ; border-radius : 16px ; backdrop-filter : blur ( 16px ) saturate ( 180% ); -webkit-backdrop-filter : blur ( 16px ) saturate ( 180% ); background-color : rgba ( 255 , 255 , 255 , 0.08 ); border : 1px solid rgba ( 255 , 255 , 255 , 0.12 ); box-shadow : 0 8px 32px rgba ( 0 , 0 , 0 , 0.2 ); pointer-events : none ; } The saturate(180%) is the part I kept forgetting, and it turns out to be the whole trick. Blurring averages colors together, and averaging colors drains saturation out of them — so a pure blur comes out looking like dirty plastic rather than glass. Pushing saturation back up compensates. Drag it down to 100% in the pen above and you'll see the effect just die. The background tint matters for a similar reason. With a fully transparent background you get a blur but no surface — nothing reads as a physical pane sitting there. Something around 8% white is enough to suggest one without washing out whatever is behind it. Wrapped in React, so the numbers are adjustable: " use client " ; type GlassCardProps = { blur ?: number ; saturate ?: number ; opacity ?: number ; radius ?: number ; }; export default function GlassCard ({ blur = 16 , saturate = 180 , opacity = 0.08 , radius = 16 , }: GlassCardProps ) { return (
AI 资讯
Ilish Polao: Bringing My Ultimate Comfort Food to Life with Pure CSS
This is my official entry for the Frontend Challenge - Comfort Food Edition under the CSS Art category. Inspiration 🍚🐟 When thinking about "comfort food," I didn’t want to pick a generic burger or pizza. I wanted to build something tied directly to home and my culture: Ilish Polao (Hilsha fish cooked with fragrant rice). Hilsha is the national fish of Bangladesh, and Ilish Polao—paired with a side of spicy-sweet tomato chutney—is the ultimate comfort meal in our house. Translating a dish loaded with personal memory into raw CSS felt like the perfect way to combine culture with code. Demo mahbubasultanaety.github.io GitHub Repository: MahbubaSultanaEty / hilsha-polao How I Built It Instead of relying on SVGs or background images, every visual element in this piece is built from scratch with HTML elements and pure CSS styling. Here is a quick breakdown of what went into the scene: Fish-Shaped Platter: Built using layered border-radius curves and subtle box-shadows to mimic ceramic depth. The Polao Mound: Formed using rounded CSS containers with layered gradient textures. Scattered Rice Grains: Instead of hardcoding dozens of tags in HTML, I used a tiny JS script to generate and randomly position rice grains over the mound so the texture feels natural rather than grid-like. The Hilsha Piece: Crafted with CSS clip-paths and custom border geometries to get the signature cut and inner texture right. Animated Steam: CSS keyframe animations controlling opacity and vertical translate transforms to give the food a hot, fresh feel. Garnishes & Sides: Added cinnamon sticks, bay leaves, green chilies, and a small side bowl of tomato chutney to complete the plate. The Sprinkle of Javascript: Rice Generation Hardcoding hundreds of rice grains in static HTML felt redundant. So I used the minimal for loop JS approach to scatter them: This tiny bit of scripting saved me time and made the plate look organic every single render. Takeaways Building CSS art always forces you to think dif
开发者
Your browser renders everything, even what you can't see — `content-visibility: auto` fixes that
When you open a long page — a news feed, an admin table, a documentation article — the browser lays...
开发者
Khachapuri: Georgian Cheese Bread in Pure CSS
This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. ...
开发者
The Leaf Is the Page: My Mother's Sunday Meal, Served in Eating Order
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built The leaf is the page. For my CSS Art entry, I drew my mother's Sunday meal: sixteen dishes on a banana leaf, each one placed where Telugu tradition puts it. For Perfect Landing, that artwork became the navigation. Tap any dish on the leaf and the page takes you to that dish's course. Scroll instead, and you move through the meal in eating order: ghee first, then the curries, the pulusu, rasam, the rice varieties, the crunch, the sweet, and finally perugu. The scroll is the serving order. The structure of the page is the structure of the meal. It is deliberately not a restaurant. No menu cards, no reservation form, no gallery. One family, one Sunday, eight courses, and the rules my mother enforces at each one. The part I cared most about: a screen reader is served this meal the same way my mother serves it. The heading order, the tab order, and the reading order all follow the eating order. Tap targets on the leaf move focus to the course they open, so keyboard and screen reader users travel with everyone else. Telugu headings carry lang="te" so they are pronounced as Telugu, not mangled as English. The course nav marks where you are. And with reduced motion on, the smooth scrolling and the ghee-pour animation both settle down together. Demo Things to try: tap the rice mound (or the ghee spoon) on the leaf and see where it takes you. Press Tab from the top of the page and watch the skip link appear before anything else. Scroll and watch the Telugu nav track your course. Turn on reduced motion and take the calm version of the same journey. Every visual on the page is CSS. No images, no SVG, no canvas. Journey The concept came from the eating itself. On a banana leaf, order is information: neyyi before anything, perugu always last. Most landing pages invent an information architecture. This meal already had one, and it is thirty years older than CSS grid. My whole job was n
AI 资讯
Dastarkhwan — A Pakistani Family Meal Brought to Life with CSS
This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. Inspiration For me comfort food has never really been about the plate. It's about who's sitting around it. I grew up in Pakistan, and the memory that comes back first is everyone crowded around the dastarkhwan over a steaming handi of chicken biryani. Someone always grabs the serving spoon before anyone else. Someone asks for more raita. The jalebis are gone before the meal even properly starts, and there's a glass of chilled lassi at every place. So I didn't want to draw a dish. I wanted to draw that — the small ritual of the first plate being served — using only HTML and CSS. Demo Live Demo : https://waasilaasif.github.io/Dastarkhwan/ Source Code : https://github.com/WaasilaAsif/Dastarkhwan Journey This went well past drawing static shapes. The centerpiece is a brass handi overflowing with biryani, framed by the usual suspects: raita, jalebis, lassi, an empty plate, and the serving spoon resting beside the pot. All of it is HTML and CSS — gradients, layered pseudo-elements, border-radius pushed to its limits, CSS-only shadows, and a fairly stubborn amount of keyframe choreography. The animation was the part I actually cared about. I didn't want things to just move. I wanted a sequence. A hand comes in, picks up the spoon, scoops from the handi, serves onto the plate, adds a spoonful of raita, sets the spoon back down, and the whole table settles into its idle state before the loop starts again. Getting the food recognizable was harder than getting it to look nice. Making a lump of gradients read as "that's a chicken leg" or "that's clearly biryani and not just yellow rice" took a lot more fiddling than the playful final result suggests. Like a lot of people in this challenge, I used AI in the process — I worked with Claude to iterate on the harder animation timing. It's a tool in the workflow, not a shortcut past the thinking. What stuck with me is that CSS can carry a story, not just sty
AI 资讯
DUM: Breaking the Seal on Hyderabadi Biryani with Pure CSS
This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration Hyderabadi dum biryani is more than a dish to me—it is a ritual. The sealed handi, the slow charcoal heat, the suspense before the atta crust is broken, and the first rush of saffron, mint, birista, and spice all feel inseparable from the experience. I wanted to turn that moment into an interactive midnight poster: Hyderabad’s skyline behind a copper handi, with the food hidden until the viewer breaks the seal. Demo Click BREAK THE SEAL to lift the lid and reveal the four biryani layers. How it works The artwork is built with HTML and CSS only: A native <details> / <summary> control stores the open and closed states. CSS :has() coordinates the seal crack, lid lift, layer reveal, steam, labels, embers, and state-aware copy. Rice grains, mint leaves, birista, spices, meat, copper patina, flour dust, the skyline, and the moon are all CSS shapes. There are no images, SVGs, canvas, JavaScript, gradients, or frameworks. A mobile composition and prefers-reduced-motion keep the piece responsive and accessible. The reveal is deliberately choreographed: seal cracks → lid lifts → layers separate → labels arrive → steam settles Journey The hardest part was keeping the illustration detailed without losing the strong poster silhouette. I iterated on three areas: Material: hammered copper marks, soot, flour residue, dough cracks, and print texture. Depth: curved food layers, overlapping grains, steam arches, and ingredient silhouettes. Motion: a staged opening sequence rather than making every element animate at once. The most satisfying decision was using a semantic HTML control for the interaction. The artwork still works with a keyboard, and disabling motion does not hide the final state. I used Codex as an iterative coding and visual-critique partner. I directed the concept, cultural references, composition, and final decisions, while the agent helped implement and test the CSS system. Wh
AI 资讯
Pixel Chef AI: A Memory Kitchen That Learns Your Taste
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing 🍳 Pixel Chef AI — A Memory Kitchen That Learns Your Taste What I Built Pixel Chef AI is an interactive AI cooking companion built around a simple idea: Food is not only about recipes. It is about memories, habits, emotions, and personal taste. Instead of being a traditional recipe generator, Pixel Chef AI creates a complete AI-powered cooking journey: 🧊 Enter the Memory Kitchen 🥬 Choose ingredients 🤖 Let AI analyze flavors and nutrition 🔥 Cook with real-time AI guidance 🍽️ Reveal your final dish 🧬 Build your personal Taste DNA Every cooking session becomes a memory. Over time, the AI learns your cooking preferences, flavor choices, and habits to create a more personalized kitchen experience. The core question behind this project: What if your AI assistant could remember how you cook and become your personal kitchen companion? ✨ Features 🧠 AI Taste Intelligence Pixel Chef AI is designed around the idea that cooking decisions are personal. The AI analyzes: Ingredient combinations Flavor balance Nutrition information User preferences It can: Predict flavor direction Suggest ingredient improvements Recommend better combinations Adapt suggestions based on cooking goals 🤖 AI Cooking Companion A pixel AI chef accompanies users throughout the entire cooking process. The AI provides: Ingredient analysis Flavor recommendations Cooking suggestions Real-time guidance during cooking Personalized feedback The goal is to make AI feel like a kitchen partner, not just a chatbot. 🧊 Interactive Pixel Kitchen The experience starts inside a cozy pixel-art kitchen. Users can: Open the fridge Select ingredients Create their own combinations Watch AI analyze their choices The kitchen becomes a place where users interact with AI through cooking. 🔥 AI Cooking Simulation Cooking becomes an interactive experience instead of a simple result page. During cooking: A cooking timeline controls progress Different coo