Skip to content

Designing and Engineering a Premium Slate Theme for Zensical

How to leverage canvas rendering, CSS variables, and the View Transitions API to upgrade static documentation layouts.

When I set out to build this website, my primary goal was to create a digital space that felt premium, cohesive, and deeply technical. I wanted a personal portfolio and blog that felt like a modern software product dashboard rather than a generic static page.

Since Zensical is incredibly fast but defaults to standard documentation layouts, I designed and coded a custom Slate Theme. In this article, I will break down the core front-end engineering techniques used to build its most interactive elements.

🧠 1. The Interactive Neural Background

A static dark background can feel heavy or uninspired. To add life without sacrificing performance, I built a canvas-based particle network in extra.js.

The script initializes a pool of particle nodes, updates their positions on a requestAnimationFrame loop, and draws lines between nodes that are close to each other. It also tracks the cursor coordinates to create an interactive gravitational pull, drawing nodes closer to the mouse pointer.

To prevent performance degradation (especially on mobile devices or low-power machines), I implemented two key optimizations:

  1. Reduced Node Density on Small Screens: The particle count scales down automatically based on screen width.
  2. Strict Boundary Detection: Nodes that float out of the viewport are recycled instead of continuing to render off-screen.

🔄 2. Circular Theme Transition (View Transitions API)

Typical dark mode toggles instantly flip the background colors, which can feel abrupt. To create a premium transition, I leveraged the modern View Transitions API to build a circular ripple transition.

When a user clicks the theme toggle:

  1. The click coordinates (clientX, clientY) are captured.
  2. The maximum radius needed to cover the viewport is calculated using Math.hypot.
  3. The transition is started, creating a dynamic clip-path circle clip animation that expands outward from the cursor position.
// Calculate circle expansion bounds
const x = e.clientX;
const y = e.clientY;
const maxRadius = Math.hypot(
  Math.max(x, window.innerWidth - x),
  Math.max(y, window.innerHeight - y)
);

🎴 3. 3D Card Tilt & Glare Effect

To make project and blog cards feel responsive and tactile, I implemented a mouse-tracking 3D hover effect using CSS variables.

When a mouse moves over a card:

  1. The cursor's relative coordinates within the card are calculated.
  2. The rotation values (--rx, --ry) and cursor coordinates (--mouse-x, --mouse-y) are set as custom CSS properties on the card element.
  3. The CSS applies a 3D transform (rotateX and rotateY) and overlays a translucent linear gradient overlay that acts as a moving lighting reflection (glare).

This achieves a subtle, high-end reflection glow that follows the user's mouse without relying on heavy third-party WebGL libraries.

🚀 Get the Template

I have cleaned up this design, removed all personal copy, and packaged it as a clean, unbranded boilerplate. If you want to bootstrap your own bilingual personal site with this theme, it is completely free and open-source:

👉 Zensical Slate Theme Template