# homepage showcase demos grid + top/showcase flag split — artlu.ai live iframe embeds of 6 curated projects on the homepage, backed by a manually-curated showcase flag separate from ★ top Type: project entry Published: 2026-04-18 [Original page]() [Browse this group]() Parent project: artlu.ai Recorded status: launched Updated: 2026-05-20T19:37:39.331Z Technologies: React, JavaScript, Firestore, Netlify, Railway Tags: artlu, dev tool ## Details **What is this?** A new homepage section that embeds up to 6 live demos of the best projects, sitting between the site header and the full project table. Meant to let a first-time visitor see the work working, without clicking anywhere. **What it does** - 3×2 grid at desktop, 2-col at 900px, 1-col at 600px - Phone-aspect previews (9:16) so responsive sites render their mobile view - Each card embeds live: `artifactHtml` via iframe srcdoc → embeddable link via src → screenshot fallback → `$_` placeholder - Wrapped in a full-bleed soft-green band in light mode (escapes the 1280 max-width via `calc(50% - 50vw)` margins); transparent in dark - Card body navigates to the project detail; a `↗` button in the preview top-right also navigates **How it works** The section is driven by a new `showcase: true` flag on project docs. It's independent from the existing `top` flag, which drives the ★ top filter pill on the all-projects list. They're different jobs: `top` is "best-of picks visible anywhere on the site," `showcase` is "must embed well AND be manually picked for the homepage grid." Previously both were conflated under a single `featured` flag — splitting them made curation honest. **Built with** React, Firestore, iframe srcdoc. Embed allowlist covers netlify / vercel / github.io / pages.dev / render / railway / fly / surge. ## Links [Site or demo]() ## Related build notes [shipped two features, then fought github desktop for an hour]() Status and dates describe the published record, not a recent test of an external service. Missing details are not inferred. Public links do not imply an open-source licence or permission to reuse material. [Directory]()