Visual Journal - A Solari Board Component

A lightweight, interactive 3D component that displays a “Solari board” of images, inspired by old-school airport departure boards. It’s designed to be a beautiful and engaging way to present a portfolio of visual stories.

Created by Willem L. Middelkoop (willem.com)

Features

Built with Three.js for smooth 3D animations.
Loads image data dynamically from a simple JSON feed.
Fully responsive, with a separate “game mode” for immersive fullscreen viewing.
Features random “clattering” and full-board “sweep” animations to feel alive.
Click/tap any tile to open a popup with a larger image and a link to the full story.
Fully localized via a simple JavaScript object.

How to Use

Integration is designed to be as simple as possible.

1. Add the HTML Placeholder Place this section tag in your HTML where you want the journal to appear.

<section id="visual-journal-container"></section>

2. Include the CSS Link to the visual-journal.css file in the <head> of your document.

<link rel="stylesheet" href="/path/to/visual-journal.css">

3. Include the JavaScript Place this script tag at the bottom of your <body>. It will automatically load the Three.js library and initialize the journal.

<script src="/path/to/visual-journal.js"></script>

Configuration

The component fetches image data from a JSON file. The path is dynamically determined by your page’s language attribute (e.g., <html lang="en"> will fetch /en/images.json).

The JSON file should be an array of objects, each with three keys:

url: The relative path to the 400x400px image.
title: The caption for the image.
target: The full URL that the image should link to.

Example images.json:

[
  {
    "url": "/path/to/image1.jpg",
    "title": "This is the first story.",
    "target": "https://yoursite.com/story-1/"
  },
  {
    "url": "/path/to/image2.jpg",
    "title": "This is the second story.",
    "target": "https://yoursite.com/story-2/"
  }
]

License

This software is released under the GNU Affero General Public License v3.0. You are free to use, modify, and distribute it, provided you adhere to the terms of the license.