Experimental Publication / System Prototype / 2026
Biomimetic Solar Experimental Publication Live System Mockup

Paper as living interface.

A full-screen project template designed as a contemporary research system: dark, technical, diagrammatic, and cinematic. It behaves more like a software instrument or lab interface than a conventional project page.

Abstract / protocol / logic

Structure of a visual paper-system.

This template is laid out as an experimental publication rather than a standard portfolio page. It keeps the discipline of an academic structure, but the reading experience is distributed across diagnostic panels, full-screen visual states, sticky analysis sections, sequence frames, and an archive-like atlas of fragments.

Premise
A project page can function like a piece of software or a lab instrument, where text, diagrams, motion and evidence all coexist as parts of a single argument.
Display mode
Dark interface, grid background, terminal fragments, signal visualizations, section indexing, and persistent technical metadata.
Use
Replace placeholder text and fake diagrams with your own project abstract, methods, prototypes, experiments, maps, process images, datasets, or citations.
Behaviour
Sections are built to support motion later: sticky analysis columns, stage-based visual storytelling, and wide panels for WebGL, video, diagrams or interactive systems.
Visual state / 01Monocrystalline panel logic
Block typeLarge system diagram
Visual state / 02Biomimetic venation logic
Block typeComparative diagram
Visual state / 03Spatial deployment / archive field
Block typeMap / atlas / relation layer
Sequence / sticky analysis / stage logic

Scroll as experimental sequence.

Each step below is a model for a full-screen chapter. On the left, you can place dense but controlled fragments of analysis. On the right, the visual state occupies almost the entire viewport and can later be animated with canvas, video, SVG, WebGL or motion libraries.

Step / 01

Decompose the object into readable layers.

Use this state to show how a device, material system or sculpture unfolds into technical parts. The left column can hold method notes, fabrication logic, references, performance metrics or conceptual framing, while the right side stages a large exploded diagram.

Good for solar cells, layered materials, artifact anatomy, installation diagrams, publication metadata, or technical taxonomies.
glass substrate
conductive layer
active junction
back contact
Step / 02

Morph the technical grid into an organic logic.

This frame is for transformations. It can shift from industrial geometry to biological pattern, from archive document to spatial network, or from scan to speculation. The important part is to preserve clarity while letting the visual argument feel alive.

Ideal for panel-to-leaf transitions, material growth diagrams, image distortion, shader-based morphs, or scroll-controlled transformations.
Step / 03

Build a networked field of relations, signals and positions.

This is where the project behaves like a developer tool or a data lab. Think nodes, coordinates, events, objects, routes, references, or energy flows. The page stops looking like an article and starts looking like a system under analysis.

Use for maps, object constellations, material dependencies, timelines, project genealogies, or artifact return simulations.
Atlas / fragments / evidence

An archive that feels computational.

The final section can behave like a data atlas or a wall of evidence. Instead of ending with a flat gallery, it continues the system language: gridded fragments, indexed samples, active cells, and placeholders for notes, image crops, file references or micro-essays.

A-01
A-02
B-03
B-04
B-05
C-06
C-07
C-08
D-09
D-10
D-11
D-12
E-13
E-14
E-15
F-16
F-17
F-18
G-19
G-20
G-21
H-22
H-23
H-24
Notes / how to use this file

Replace, not redesign.

The point of this template is to give you an already contemporary spatial logic. You only need to replace the placeholders with your own images, diagrams, motion systems, text and metadata. The structure is already closer to a digital lab or developer interface than to a conventional project page.

Swap first

Core identity

  • Project title and subtitle
  • Abstract and research statement
  • Metadata in top bar and side panels
  • Hero diagram or live visual system
Replace next

Visual evidence

  • Fake diagrams with real images or videos
  • Archive grid with real process fragments
  • Signal graph with actual data or animation
  • Sequence stages with your experiments
Add later

Motion layer

  • Canvas or WebGL background
  • Scroll-triggered state changes
  • Shader morphs for image transitions
  • Interactive nodes, maps or timelines