BEJSON Graphics Showcase: 12-Second Master Transition & Column-Drop Typography Engine

Figure 1: BEJSON 105 Master 12.0s Cinematic Transition & Column-Drop Typography (1280x720, 360 frames @ 30 FPS, rendered via pure-Python Pillow vector physics and FFmpeg 2-pass palettegen)

High-performance procedural motion graphics engine and cinematic transition suite for BEJSON technical documentation, repository hero showcases, and video title sequences.

---

Table of Contents

• Architecture & Core Purpose
• Two-Phase Timeline & Visual Anatomy
  • Phase 1: Stochastic Grid Transition & Concussive Detonation (0.0s – 8.0s)
  • Phase 2: Liquid Column-Drop Technical Grid Typography (8.0s – 12.0s)
• Mathematical Foundations & Physics Engines
  • 1. Non-Linear Exponential Cell Activation Curve
  • 2. Concussive Shockwave & Particle Detonation Dynamics
  • 3. Column-by-Column Drip In & Liquid Settling Bounce
  • 4. Absolute Typography Bounding Box & Descender Clearance
• Multi-Format Encoding & Compilation Pipeline
  • 1. Zero-Dependency Pure-Python Frame Synthesis
  • 2. Lossless Zero-Re-encoding Stream Concat
  • 3. Two-Pass Palettegen GIF Compilation
• Directory Layout & File Catalog
• CLI Quickstart & Execution Guide
  • 1. Generate Part 1: Accelerating Grid Transition
  • 2. Generate Part 2 & Merge Master Animation
  • 3. Interactive Web Playback
• Browser & Web Stage Integration
• License & Attribution

---

Architecture & Core Purpose

Modern technical repositories and AI platforms often suffer from bland, static imagery or oversized video files that fail to communicate the high-velocity, deterministic nature of file-backed data architectures.

The BEJSON_105_Graphics_Showcase motion graphics suite provides a completely standalone, zero-external-math animation framework executed directly on standard Python 3.10+ environments (including mobile Android Termux ARM64) using native Pillow (PIL) and ffmpeg.

Core Capabilities:

1. Procedural Vector Synthesis: Generates high-framerate (30 FPS) 720p widescreen animations entirely in code without requiring Blender, After Effects, or pre-rendered sprites.
2. Strict Tri-Color Palette Invariant: Enforces the canonical Elton Boehnen Tri-Color visual aesthetic:
   • Obsidian Black (#000000): Deep void backdrop representing raw, zero-overhead storage.
   • Stark White (#FFFFFF): Primary typography and structural accents.
   • Signature Red (#DE2626): Kinetic highlights, active cell activations, and concussive shockwaves.
3. Dual-Era Version Support: Built-in support to render branded titles for either BEJSON 105 (Integrity Era) or BEJSON 104 (Foundational Era) via simple CLI flags.
4. Zero-Re-encoding Stream Concat: Part 1 and Part 2 are rendered independently and joined losslessly in milliseconds via FFmpeg demuxer copying.

---

Two-Phase Timeline & Visual Anatomy

The animation spans an exact total of 12.000 seconds (360 frames @ 30 FPS), divided into two complementary phases:

[0.0s] -------------------- Phase 1 (8.0s / 240 Frames) --------------------> [8.0s] -------------------- Phase 2 (4.0s / 120 Frames) --------------------> [12.0s]
  |                                                                                |                                                                                |
  +-- Grid Inversion (0.0s - 5.5s)                                                 +-- Technical Grid Reveal (8.0s - 8.3s)                                          +-- Master Loop Reset
  |   - Exponential velocity pickup                                                |
  |   - 576 cells switch to #DE2626                                                +-- Column-by-Column Liquid Drip (8.3s - 10.4s)
  |                                                                                |   - Left-to-right wave cascade
  +-- Kinetic Slide-Down (5.5s - 6.4s)                                             |   - Elastic settling bounce
  |   - Full red canvas drops 120px                                                |   - Leading drip bead simulation
  |                                                                                |
  +-- Concussive Detonation & Boom (6.4s - 7.2s)                                   +-- Accent Line & HUD Reticles (9.7s - 11.0s)
  |   - Hyper-velocity expanding shockwaves                                        |   - Expanding #DE2626 cross-line
  |   - Particle shard dispersion                                                  |   - Subtitle tracking fade
  |                                                                                |
  +-- Obsidian Dissolution (7.2s - 8.0s)                                           +-- Hold & Final State (11.0s - 12.0s)
      - Shockwave dissipation to pure #000000                                          - Pristine static display before seamless loop

---

Phase 1: Stochastic Grid Transition & Concussive Detonation (0.0s – 8.0s)

Generated by generate_checkerboard_transition.py:

1. Subtle Dual-Tone Matrix: The canvas begins with a technical 40x40 pixel checkerboard grid consisting of 576 discrete tiles (32 columns × 18 rows) in muted dark obsidian (#0A0A0E and #121218), divided by subtle #1C1C26 boundary seams and crosshairs.
2. Non-Linear Acceleration: Tiles randomly turn into Elton Boehnen Signature Red (#DE2626). Rather than a linear fill, the transition follows an exponential acceleration curve. It begins with sparse, isolated red flickers, steadily gathers momentum, and rapidly cascades into a roaring torrent of red cells until the entire canvas is 100% solid crimson.
3. Kinetic Slide-Down: Once fully red, the entire solid crimson field performs a weighted downward slide of 120 pixels with cubic easing, building physical anticipation.
4. Concussive Detonation ("Boom"): At $t = 6.4\text{s}$, the crimson field detonates. High-energy concentric shockwave rings expand outward from the canvas center at supersonic velocities while 80 random geometric particle shards shatter across the screen.
5. Dissolution to Black: The shockwaves dissipate into the surrounding void, extinguishing all residual energy into pure, pristine #000000 black by exactly frame 240 (8.0s).

---

Phase 2: Liquid Column-Drop Technical Grid Typography (8.0s – 12.0s)

Generated by generate_text_drip_and_merge.py:

1. Pure Black Technical Grid: Out of the darkness, a stark obsidian technical coordinate grid fades in with crosshairs at 40px intersections.
2. Liquid Column-Drop Typography:
   • The master typography (BEJSON in bold #FFFFFF white, followed by 105 or 104 in signature #DE2626 red) is divided into 4px vertical column slices across its entire width.
   • Starting at frame 8 of Part 2, these column slices drop downward in a progressive left-to-right wave cascade.
   • Each column falls with gravitational acceleration, overshoots slightly, and settles with an elastic cubic easing curve.
   • At the leading edge of each falling slice, a dynamic circular drip bead is rendered, producing an unmistakable liquid technical aesthetic.
3. Horizontal Accent & HUD Reticles:
   • At frame 50 ($t = 9.7\text{s}$), a glowing #DE2626 horizontal divider line expands outward from the center beneath the text, capped with technical bracket reticles.
   • At frame 60 ($t = 10.0\text{s}$), the secondary telemetry subtitle ("INTEGRITY ERA // MULTI-FILE DATABASE v1.40 // REFERENTIAL INTEGRITY") fades in.
   • The four corners render technical HUD reticles, timecode stamps, and architectural identity badges.
4. Hold & Loop Transition: The completed typographic stage holds cleanly from frames 90 to 120, ensuring pristine legibility before looping seamlessly.

---

Mathematical Foundations & Physics Engines

1. Non-Linear Exponential Cell Activation Curve

Linear transitions feel mechanical and uninspired. To achieve the user requirement where the grid "gradually picks up speed turning red until full red", the activation progression is modeled using an exponential power function:

$$\text{progress}(f) = \left( \frac{f}{F_{\text{fill}}} \right)^{\gamma}$$

Where:

• $f$ is the current frame index ($0 \le f \le 165$).
• $F_{\text{fill}} = 165$ frames (5.5 seconds).
• $\gamma = 2.4$ is the non-linear acceleration exponent.

At $f = 30$ ($t = 1.0\text{s}$), $\text{progress} = (30/165)^{2.4} \approx 0.017$ (only 10 of 576 tiles are red).
At $f = 120$ ($t = 4.0\text{s}$), $\text{progress} = (120/165)^{2.4} \approx 0.468$ (270 tiles red).
In the final 1.5 seconds, the remaining 306 tiles activate in an explosive crescendo.

# From generate_checkerboard_transition.py
raw_progress = f / float(FILL_FRAMES)
eased_progress = math.pow(raw_progress, 2.4)
tiles_to_turn = int(TOTAL_TILES * min(1.0, eased_progress))

---

2. Concussive Shockwave & Particle Detonation Dynamics

The explosion phase ($f \in [192, 240]$) calculates multi-ring blast fronts expanding outward from canvas coordinates $(c_x, c_y) = (640, 360)$:

$$R_i(f) = v_i \cdot \Delta t^{\alpha}$$

Where the outer primary blast wave expands with a damping exponent $\alpha = 0.85$, while the shockwave alpha intensity decays quadratically:

$$I(f) = I_{\text{max}} \cdot \left( 1.0 - \frac{\Delta f}{F_{\text{boom}}} \right)^2$$

In parallel, 80 deterministic particle fragments calculate radial trajectories with random velocities ($v \in [6, 28]\text{ px/frame}$) and drag deceleration ($k_{\text{drag}} = 0.96$).

---

3. Column-by-Column Drip In & Liquid Settling Bounce

Each vertical 4-pixel column strip $s \in [0, N]$ calculates an independent arrival time based on its horizontal position:

$$\text{delay}(s) = F_{\text{start}} + \left\lfloor \frac{s}{N} \cdot 36 \right\rfloor$$

Once triggered, the column drops over a 24-frame window governed by a two-phase ease curve:

1. Accelerated Drop ($0.0 \le \tau < 0.85$): Smooth Hermite interpolation $\tau' = \tau^2 \cdot (3 - 2\tau)$ mapping from $y = \text{start_y}$ to $y = \text{target_bottom_y}$.
2. Elastic Settling Bounce ($0.85 \le \tau \le 1.0$): Dampened sine wave oscillation creating a crisp physical impact:

$$y_{\text{offset}} = 1.0 - \frac{6.0 \cdot \sin\left( \frac{\tau - 0.85}{0.15} \cdot \pi \right)}{H_{\text{text}}}$$

---

4. Absolute Typography Bounding Box & Descender Clearance

Important

Anti-Clipping Rule (Codes 434 & 435): Standard Pillow draw.textbbox((0, 0), text) calculates glyph bounds relative to font ascent, ignoring absolute coordinate translation. If rendered carelessly, letters with deep descenders (e.g. J in BEJSON, p, g, y) suffer from baseline truncation.

This suite queries absolute canvas coordinates directly and applies an explicit +24px descender clearance:

# Absolute canvas bounding box query
bbox_actual = t_draw.textbbox((start_x, start_y), f"BEJSON {version_str}", font=font_main)
# target_bottom_y guarantees 100% descender visibility
target_bottom_y = bbox_actual[3] + 24

The underlying horizontal accent line is positioned at $y = 425$ and the subtitle at $y = 455$, guaranteeing generous padding and zero visual collisions.

---

Multi-Format Encoding & Compilation Pipeline

1. Zero-Dependency Pure-Python Frame Synthesis

Both scripts execute without heavy external numerical libraries like numpy or scipy, relying entirely on Python's built-in math, random, and Pillow (PIL). This achieves sub-millisecond per-frame generation speeds even on constrained mobile hardware.

2. Lossless Zero-Re-encoding Stream Concat

Because Part 1 (8.0s) and Part 2 (4.0s) are encoded with identical codec properties (libx264, yuv420p, 1280x720, 30 FPS, CRF 18), they are concatenated instantly without transcoding:

ffmpeg -y -f concat -safe 0 -i concat_list.txt -c copy master_12s.mp4

Execution time: 0.02 seconds (pure I/O transfer).

3. Two-Pass Palettegen GIF Compilation

Single-frame or poorly dithered GIFs are strictly prohibited. The suite compiles animated GIFs using FFmpeg's two-pass optimal palette generation with Lanczos downscaling and Bayer spatial dithering:

# Pass 1: Generate dynamic differential color palette
ffmpeg -y -i master_12s.mp4 -vf "fps=15,scale=640:360:flags=lanczos,palettegen=stats_mode=diff" palette.png

# Pass 2: Render high-fidelity GIF with rectangular differential updating
ffmpeg -y -i master_12s.mp4 -i palette.png \
  -lavfi "fps=15,scale=640:360:flags=lanczos [x]; [x][1:v] paletteuse=dither=bayer:bayer_scale=5:diff_mode=rectangle" \
  master_12s.gif

Result: 180 fluid frames @ 15 FPS with vivid #DE2626 color accuracy and zero artifacts in a lightweight 1.28 MB payload.

---

Directory Layout & File Catalog

BEJSON_105_Graphics_Showcase/
├── README.md                                 # Authoritative documentation (this file)
├── bejson_project.json                       # Canonical BEJSON 104a project tracker
├── .gitignore                                # Git ignore for temporary frames and caches
├── generate_checkerboard_transition.py       # Phase 1 generator (8s accelerating grid transition)
├── generate_text_drip_and_merge.py           # Phase 2 generator (4s column drop) & 12s concat merger
├── index.html                                # Standalone responsive Tri-Color HTML stage player
├── checkerboard_stage.html                   # Secondary HTML video viewer
├── checkerboard_transition_8s.mp4            # Phase 1 8.0s standalone MP4 (1280x720, 1.02 MB)
├── checkerboard_transition_8s.gif            # Phase 1 8.0s standalone GIF (640x360, 776 KB)
├── bejson_105_text_drip_4s.mp4               # Phase 2 4.0s BEJSON 105 typography MP4 (94 KB)
├── bejson_104_text_drip_4s.mp4               # Phase 2 4.0s BEJSON 104 typography MP4 (124 KB)
├── checkerboard_bejson_105_merged_12s.mp4    # Master 12.0s BEJSON 105 MP4 (1280x720, 1.11 MB)
├── checkerboard_bejson_105_merged_12s.gif    # Master 12.0s BEJSON 105 Animated GIF (640x360, 1.28 MB)
├── checkerboard_bejson_104_merged_12s.mp4    # Master 12.0s BEJSON 104 MP4 (1280x720, 1.14 MB)
└── checkerboard_bejson_104_merged_12s.gif    # Master 12.0s BEJSON 104 Animated GIF (640x360, 1.34 MB)

---

CLI Quickstart & Execution Guide

1. Generate Part 1: Accelerating Grid Transition

Renders 240 frames of the checkerboard red fill, downward slide, and explosion, compiling checkerboard_transition_8s.mp4 and checkerboard_transition_8s.gif:

python3 generate_checkerboard_transition.py

2. Generate Part 2 & Merge Master Animation

Renders the 4.0s column-drop typography and losslessly joins Part 1 + Part 2 into the 12.0s master files.

To render for BEJSON 105 (Integrity Era):

python3 generate_text_drip_and_merge.py --era 105

To render for BEJSON 104 (Foundational Era):

python3 generate_text_drip_and_merge.py --era 104

To re-encode or re-merge without re-rendering individual frame PNGs:

python3 generate_text_drip_and_merge.py --era 105 --skip-render

3. Interactive Web Playback

Open index.html in any web browser to view the looped master video on a technical HUD display stage:

# Example local HTTP server
python3 -m http.server 8080
# Open http://localhost:8080/index.html

---

Browser & Web Stage Integration

To embed the 12-second master animation in web applications, CMS portals, or landing pages, use the standardized responsive snippet below:

<div class="bejson-hero-stage" style="width:100%; max-width:960px; aspect-ratio:16/9; background:#000000; border:1px solid #222230; overflow:hidden;">
  <video src="checkerboard_bejson_105_merged_12s.mp4" autoplay loop muted playsinline style="width:100%; height:100%; object-fit:cover; display:block;"></video>
</div>

---

License & Attribution

The BEJSON_105_Graphics_Showcase motion graphics suite is authored and designed by Elton Boehnen.

• Author: Elton Boehnen
• Email: boehnenelton2024@gmail.com
• Web Portal: boehnenelton2024.pages.dev
• GitHub: github.com/boehnenelton
• License: PolyForm Noncommercial License 1.0.0 (PolyForm-Noncommercial-1.0.0)