docs: add frosted glass blur and graphics pipeline animated showcase GIF to README

Author: leftger

README.md

@@ -50,6 +50,9 @@ gui.render(&mut display)?;
 
 ## Visual Showcase
 
+### Accelerated Graphics Pipeline & Frosted Glass Blur
+![Frosted glass and graphics pipeline showcase](docs/screenshots/frosted_glass_pipeline.gif)
+
 ### Tactile Cinematic Motion & Transitions
 ![Animation and transition showcase](docs/screenshots/motion.gif)
 

docs/screenshots/frosted_glass_pipeline.gif

@@ -133,6 +133,11 @@ fn render_scene<D: DrawTarget<Color = Rgb565> + PixelRead>(
 fn main() {
     println!("=== embedded-gui: Graphics Pipeline Showcase ===");
 
+    if std::env::args().any(|a| a == "--record-gif") || std::env::var("RECORD_GIF").is_ok() {
+        record_frames();
+        return;
+    }
+
     let res = std::panic::catch_unwind(|| {
         run_interactive();
     });
@@ -144,6 +149,37 @@ fn main() {
     }
 }
 
+fn record_frames() {
+    let out_dir = std::path::Path::new("target/pipeline_frames");
+    let _ = std::fs::create_dir_all(out_dir);
+
+    let mut fb = Framebuffer::<FB_SIZE>::new(W, H);
+    let total_frames = 80;
+    println!(
+        "Recording {} frames to target/pipeline_frames...",
+        total_frames
+    );
+
+    for f in 0..total_frames {
+        render_scene(&mut fb, f, 160).unwrap();
+
+        // Convert RGB565 to RGB888 bytes
+        let mut rgb888 = Vec::with_capacity((W * H * 3) as usize);
+        for p in fb.pixels() {
+            let r = (p.r() << 3) | (p.r() >> 2);
+            let g = (p.g() << 2) | (p.g() >> 4);
+            let b = (p.b() << 3) | (p.b() >> 2);
+            rgb888.push(r);
+            rgb888.push(g);
+            rgb888.push(b);
+        }
+
+        let filename = out_dir.join(format!("frame_{:03}.raw", f));
+        std::fs::write(filename, &rgb888).unwrap();
+    }
+    println!("Frame recording complete!");
+}
+
 fn run_interactive() {
     let mut fb = Framebuffer::<FB_SIZE>::new(W, H);
     let mut display = SimulatorDisplay::<Rgb565>::new(Size::new(W, H));

examples/basics/graphics_pipeline_showcase.rs

@@ -0,0 +1,48 @@
+#!/usr/bin/env python3
+"""
+Generate animated GIFs and screenshots for embedded-gui documentation.
+"""
+
+import os
+import subprocess
+from pathlib import Path
+from PIL import Image
+
+W, H = 320, 240
+REPO_ROOT = Path(__file__).resolve().parent.parent
+FRAMES_DIR = REPO_ROOT / "target" / "pipeline_frames"
+OUTPUT_GIF = REPO_ROOT / "docs" / "screenshots" / "frosted_glass_pipeline.gif"
+
+def main():
+    print("1. Running showcase in record-frames mode...")
+    subprocess.run(
+        ["cargo", "run", "--example", "graphics_pipeline_showcase", "--", "--record-gif"],
+        cwd=REPO_ROOT,
+        check=True,
+    )
+
+    print("2. Compiling raw frames into animated GIF...")
+    raw_files = sorted(FRAMES_DIR.glob("frame_*.raw"))
+    if not raw_files:
+        print("Error: No recorded frames found!")
+        return
+
+    images = []
+    for f in raw_files:
+        raw_bytes = f.read_bytes()
+        img = Image.frombytes("RGB", (W, H), raw_bytes)
+        images.append(img)
+
+    OUTPUT_GIF.parent.mkdir(parents=True, exist_ok=True)
+    images[0].save(
+        OUTPUT_GIF,
+        save_all=True,
+        append_images=images[1:],
+        duration=33,  # ~30 fps
+        loop=0,
+        optimize=True,
+    )
+    print(f"-> Successfully generated {OUTPUT_GIF} ({len(images)} frames, {os.path.getsize(OUTPUT_GIF)} bytes)")
+
+if __name__ == "__main__":
+    main()