NOCTISInto the unknown.

The brief

Build a distinctive digital presence for a fictional exploration brand. The experience should feel cinematic while keeping the product easy to find and the main chapters editable. NOCTIS is a studio design exploration implemented as a local website, with no external client, sales figures or commercial outcome claims.

The visual direction

Deep black, ivory typography and amber light give the website a science-fiction editorial language. The eclipse establishes scale; large type, open space and deliberate pauses organise the narrative. The website artwork and the architectural portfolio cover were created with AI. The captures and video below record the implemented website.

Eight chapters, one journey

1. Opening. A monumental eclipse and “NOT FROM THIS WORLD” introduce the brand. Scrolling brings the scene closer and moves the typography out of frame.
2. Manifesto. A typographic pause explains the ambition: objects and experiences that shift the way we see.
3. Expedition. Departure, silence and arrival form three horizontal scenes on desktop and a vertical sequence on mobile.
4. The Orbital. A sculptural product rotates into view, with a clear link to its WooCommerce product page.
5. Material studies. Ivory surfaces and smoked reflections turn the product details into an editorial composition.
6. Transmissions. Editorial notes extend the visual world with ideas about space, objects and exploration.
7. Philosophy. Principles about curiosity, intention and perspective give the brand a voice beyond the imagery.
8. Closing. The final scene returns to the eclipse, completing the narrative and offering a next step.

Editing and the product journey

A custom WordPress theme and the NOCTIS widget plugin give each chapter its own Elementor widget. Editors can change the chapter type, headline, introduction, images and primary action. WooCommerce connects The Orbital product page to the cart. This demonstrates a product-to-cart journey; payment, shipping and real orders are outside the demo scope. The Orbital is a fictional concept product.

Motion, mobile and accessibility

Motion follows scrolling: eclipse zoom, typography displacement, frame transitions, the horizontal expedition and product rotation. It does not follow the pointer or intercept native scrolling. On mobile, the expedition becomes three vertical scenes. Reduced-motion preferences remove pinned animation sequences and present the content without motion.

What was checked

The local verification report from October 5, 2026 covers 1440, 768, 390 and 320 px viewports without horizontal overflow, no recorded runtime errors or automated accessibility violations, and an Elementor editor preview. The capture report records 13 screenshots and a 42-second walkthrough with no capture errors. These are local technical checks; they do not establish production performance, complete accessibility conformance or business results.