Present a flagship product as a quiet nighttime campaign: large Bodoni title cards, deep black surfaces, close-up photography and slow champagne-colored light behind glass controls. Obsidian Cinema Landing moves from an opening statement through product details and specifications to a trial or reservation enquiry. It supplies a complete front-end journey, while real booking, email and deposit handling remain separate integrations.
What you get
A centered title-card hero over procedural canvas ribbons, one supporting sentence and one glass action, followed by a single-sentence manifesto. Bodoni Moda normal/italic handles display text and Instrument Sans handles reading and controls; one low-saturation accent supplies light, focus and active states.
A feature card with three to five selectable product moments and crossfading close-ups, a letterboxed night scene, repairability/parts content and grouped specifications. A companion-app panel demonstrates profile changes with a morphing curve/readouts over slow motion, followed by supporting statistics. These are editable campaign views, not a connected product app.
A showroom/trial panel with room or city, day and time choices, name/email validation and a local receipt. A reservation panel offers finishes, price/balance/deposit summary, country/contact/terms fields and a local reference. Contact and newsletter forms complete the front-end paths. No actual slot, stock or payment is reserved, and messages are not delivered by these examples.
A journal whose entries open in reading sheets, policy sheets for topics such as shipping and warranty, a contact sheet and a mobile menu. Section and sheet links provide a coherent page journey. Specifications, availability, warranty/deposit terms and other policies must reflect the real business rather than the fictional headphone example.
A matched ten-image reference plan: four product close-ups, a wide nighttime scene, an in-box flat lay, a place to try the product and three journal images. Built-in canvas scenes can replace photographic stages when suitable imagery is unavailable; journal entries can become text-only. Your supplied brand film can replace a canvas stage under the same dark scrim.
One offline HTML file by default, embedding both font families, scripts and chosen photographs. The package includes the template, builder, static validator and visual/image/motion/section guides. Existing or requested framework projects receive native components with the same design rules rather than a standalone wrapper.
Before you choose
Use this when the product deserves close inspection and its real specifications and policies can support the mood. Make the price, deposit and next step explicit. Treat the reservation and showroom flows as prototypes until their real services are connected; a persuasive receipt must never imply money, stock or a time slot was secured when it was not.
Good fit
Premium hardware, audio, fashion or lifestyle launches centered on one distinctive product and specific materials, features and policies.
Preorder, waitlist or reservation campaigns where a product story and clear price/availability line lead to an enquiry.
Boutique hotels and specialist services that can map product moments to rooms or method steps and the trial panel to an appointment request.
Not for
A bright, playful consumer-app identity; the supplied treatment is dark, restrained and theatrical.
Real checkout or guaranteed reservation capacity from the template alone. Deposit collection, inventory, appointment availability and email need connected services.
A campaign whose credibility depends on ratings or press-logo walls. This format uses verifiable specifications, terms and process instead of borrowed social proof.
How to use
You say/obsidian-cinema-landing Build a launch page for Ondelle Nocturne headphones, from $1,290, with listening-room booking and a reservation form.
Provide the brand, product/category, price or availability, place of manufacture and how people can try or buy it. Supply actual deposit, warranty, shipping and return policies, along with specifications and replacement-part details where relevant. The agent drafts concise copy and lists unconfirmed facts for review; do not inherit the example’s claims or dates.
Plan one coherent nighttime photo set with a single key light and the same product design in every shot. Use your own product photos/footage or the agent’s image tool, which may charge for usage. Four close-ups should match the feature topics; other slots show use, contents, trial location and journal subjects. Replace the fictional headphone imagery; the neutral fjord photograph can remain a disclosed placeholder. No suitable photos: use the documented canvas/text fallbacks rather than unrelated stock.
Keep the title-card composition, manifesto and closing invitation. Configure feature tabs, specifications, profile data, rooms, finishes, deposit, countries, articles and policies together with their linked IDs. Two to four rooms/finishes keep selection compact; unsupported companion, physical-trial or journal sections may be removed or recast with their links. Product facts and policy language should carry the persuasion.
Adjust the single accent setting for a warmer or cooler low-saturation tone, retaining near-black surfaces and readable scrims. Supplied local footage may replace a stage’s canvas. Preserve still/reduced-motion behavior and control autoplay; changing a visual stage does not establish the accuracy of the claims shown over it.
With no project, build the standalone file using Node.js 18 or newer and build-time internet to download and embed three font files. The finished page needs no runtime CDN or remote image request. In a framework, use native sections/content and manage the canvas lifecycle in that stack. Keep photographs/fonts locally bundled.
Run static checks, then inspect 1440, 1024, 768 and 390px layouts and the intended preview. Try every feature tab, profile, spec group, room/day/time/finish option, reading/policy/contact sheet, menu/Escape and form in invalid and valid states. Check crop/scrim readability, reduced motion, offscreen/hidden-tab pause and reservation arithmetic. Before publishing, replace local confirmation promises or connect and verify actual booking, email and deposit services; generated receipts alone do not prove success.
Requirements and costs
You bring
Brand name, product and category, and a price or availability line · How people try or buy it (showrooms, demo, waitlist) and trust policies such as deposit, warranty and shipping · Optional: your own product photos or brand footage
Dependencies
Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent for the product photo set; optional, since you can supply photos or keep the canvas scenes
Outside costs
Photos are generated with your agent's own image tool, which may incur that tool's usage charges; you can supply your own instead. Without photos the slots fall back to built-in canvas scenes, and the finished page makes no network requests.
Publisher testing
v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
FAQ
One self-contained HTML file with fonts and photos embedded for offline viewing. The source template uses separate assets and CDN font references; the build script turns that source into the embedded deliverable. An existing or requested framework project instead gets native sections/components using the same visual system.
You can supply a consistent product photo set or generate it with the agent’s available image tool, which may charge for usage. The plan covers four close-ups, a night scene, flat lay, trial location and three journal subjects. Without suitable photos, adapt the photographic stages to the documented canvas scenes and use text-only journal entries. The layout is not intended to be filled with unrelated stock.
Yes. A stage can use your local supplied footage beneath the dark scrim instead of procedural canvas. One low-saturation accent setting changes the glows, focus rings and canvas tone together. Retain the dark grounds, calm motion and readable type, and test still/reduced-motion behavior after the change.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.