Skip to content

Commit 7493cc7

Browse files
author
devpossible
committed
feat(effects): add various visual effects including lens flare, lightning, and more
1 parent 001bc28 commit 7493cc7

46 files changed

Lines changed: 4279 additions & 1634 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CHANGELOG.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1717

1818
## [Unreleased]
1919

20+
### Added
21+
22+
- **Page Effects System** - 30+ animated overlays for panels:
23+
- Background effects: aurora, snow, rain, bubbles, fireflies, stars-twinkle, lava-lamp, bokeh, smoke, waves, confetti, lightning, clouds, embers, fireworks, breathing-glow
24+
- Overlay effects: vhs-static, film-grain, lens-flare, neon-border, chromatic-aberration, crt-warp
25+
- Container animations: gentle-float, tilt-3d, bounce, wave
26+
- Character mascots: vanna-white, pixel-mascot, robot-assistant
27+
- Alert effects: spotlight
28+
- **Effects Documentation** - New `docs/effects/README.md` with usage guide
29+
30+
### Changed
31+
32+
- Slowed down matrix-rain effect speed for better visibility
33+
- Slowed down grid-pulse effect speed for smoother animation
34+
35+
### Removed
36+
37+
- Removed value-change triggered effects (particle-burst, glitch, glow-on-change, flip-digits, typewriter, slide-numbers, neon-trails, shake-on-warning, warning-flash, bounce-in)
38+
- Removed color-cycle effect
39+
- Removed red-man effect
40+
2041
## [0.3.0] - 2026-01-11
2142

2243
## [0.2.5] - 2026-01-11

‎CLAUDE.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,61 @@ lcdpossible config list-themes
280280
lcdpossible show cpu-info|@theme=executive
281281
```
282282

283+
## Available Page Effects
284+
285+
For complete effects documentation, see `docs/effects/README.md`.
286+
287+
Page effects are animated overlays applied to panels. Apply with `|@effect=<name>`.
288+
289+
### Background Effects
290+
291+
| Effect | Description |
292+
|--------|-------------|
293+
| `scanlines` | CRT/retro scanline overlay |
294+
| `matrix-rain` | Digital rain falling behind widgets |
295+
| `particle-field` | Floating particles in the background |
296+
| `grid-pulse` | Grid lines pulse outward from center |
297+
| `fireworks` | Colorful fireworks exploding |
298+
| `aurora` | Northern lights with flowing color ribbons |
299+
| `snow` | Gentle snowflakes drifting down |
300+
| `rain` | Rain drops falling with splash effects |
301+
| `bubbles` | Translucent bubbles floating upward |
302+
| `fireflies` | Glowing particles drifting randomly |
303+
| `stars-twinkle` | Stationary twinkling starfield |
304+
| `lava-lamp` | Blobby colored blobs floating |
305+
| `bokeh` | Out-of-focus light circles drifting |
306+
| `smoke` | Wispy smoke tendrils rising |
307+
| `waves` | Ocean waves flowing at bottom |
308+
| `confetti` | Colorful confetti falling |
309+
| `lightning` | Occasional lightning flashes |
310+
| `clouds` | Slow-moving clouds drifting |
311+
| `embers` | Glowing embers floating upward |
312+
| `breathing-glow` | Pulsing ambient glow around edges |
313+
314+
### Overlay Effects
315+
316+
| Effect | Description |
317+
|--------|-------------|
318+
| `vhs-static` | VHS tape noise/tracking lines |
319+
| `film-grain` | Old film grain texture overlay |
320+
| `lens-flare` | Moving lens flare effect |
321+
| `neon-border` | Glowing pulse around widget edges |
322+
| `chromatic-aberration` | RGB split/shift effect |
323+
| `crt-warp` | CRT screen edge warping |
324+
325+
### Effect Usage
326+
327+
```bash
328+
# Apply effect to panel
329+
lcdpossible show cpu-status|@effect=matrix-rain
330+
331+
# Combine with theme
332+
lcdpossible show cpu-status|@effect=scanlines|@theme=cyberpunk
333+
334+
# Random effect
335+
lcdpossible show cpu-status|@effect=random
336+
```
337+
283338
### Media Panel Examples
284339

285340
```bash

‎docs/effects/README.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# LCDPossible Page Effects
2+
3+
Page effects are animated overlays that can be applied to any panel to add visual flair. Effects run in real-time and are rendered on top of or behind the panel content.
4+
5+
**Related Documentation:**
6+
- [Panels](../panels/README.md) - Available display panels
7+
- [Themes](../themes/README.md) - Color themes and customization
8+
9+
## Using Effects
10+
11+
### Apply Effect to Panel
12+
13+
```bash
14+
# Apply effect using pipe syntax
15+
lcdpossible show cpu-status|@effect=matrix-rain
16+
17+
# Multiple modifiers
18+
lcdpossible show cpu-status|@effect=scanlines|@theme=cyberpunk
19+
20+
# In profile YAML
21+
panels:
22+
- type: cpu-status
23+
effect: aurora
24+
theme: cyberpunk
25+
```
26+
27+
### Random Effect
28+
29+
```bash
30+
# Apply random effect
31+
lcdpossible show cpu-status|@effect=random
32+
```
33+
34+
## Effect Categories
35+
36+
### Container Animation Effects
37+
38+
Effects that animate the panel widgets/containers.
39+
40+
| Effect | Description |
41+
|--------|-------------|
42+
| `gentle-float` | Containers float up/down subtly (breathing effect) |
43+
| `tilt-3d` | Containers have slight 3D tilt/perspective that shifts |
44+
| `bounce` | Widgets bounce around with physics, bouncing off walls |
45+
| `wave` | Widgets wave in a sine pattern across the grid |
46+
47+
### Background Effects
48+
49+
Animated backgrounds that render behind the panel content.
50+
51+
| Effect | Description |
52+
|--------|-------------|
53+
| `scanlines` | CRT/retro scanline overlay |
54+
| `matrix-rain` | Digital rain falling behind widgets |
55+
| `particle-field` | Floating particles in the background |
56+
| `grid-pulse` | Grid lines pulse outward from center |
57+
| `fireworks` | Colorful fireworks exploding in the background |
58+
| `hologram` | Holographic shimmer/interference pattern |
59+
| `aurora` | Northern lights with flowing color ribbons |
60+
| `snow` | Gentle snowflakes drifting down |
61+
| `rain` | Rain drops falling with splash effects |
62+
| `bubbles` | Translucent bubbles floating upward |
63+
| `fireflies` | Glowing particles drifting randomly |
64+
| `stars-twinkle` | Stationary twinkling starfield |
65+
| `lava-lamp` | Blobby colored blobs floating |
66+
| `bokeh` | Out-of-focus light circles drifting |
67+
| `smoke` | Wispy smoke tendrils rising |
68+
| `waves` | Ocean waves flowing at bottom |
69+
| `confetti` | Colorful confetti falling continuously |
70+
| `lightning` | Occasional lightning flashes across background |
71+
| `clouds` | Slow-moving clouds drifting across |
72+
| `embers` | Glowing embers floating upward |
73+
| `breathing-glow` | Pulsing ambient glow around edges |
74+
75+
### Overlay Effects
76+
77+
Effects that render on top of panel content for post-processing looks.
78+
79+
| Effect | Description |
80+
|--------|-------------|
81+
| `vhs-static` | VHS tape noise/tracking lines |
82+
| `film-grain` | Old film grain texture with scratches |
83+
| `lens-flare` | Moving lens flare effect |
84+
| `neon-border` | Glowing pulse around widget edges |
85+
| `chromatic-aberration` | RGB split/shift effect at edges |
86+
| `crt-warp` | CRT screen edge warping/vignette |
87+
88+
### Character/Mascot Effects
89+
90+
Animated characters that interact with the panel content.
91+
92+
| Effect | Description |
93+
|--------|-------------|
94+
| `vanna-white` | Character walks up to tiles and gestures at them |
95+
| `pixel-mascot` | Retro pixel character reacts to values |
96+
| `robot-assistant` | Cute robot points at important metrics |
97+
98+
### Alert/Status Effects
99+
100+
Effects triggered by panel state or data values.
101+
102+
| Effect | Description |
103+
|--------|-------------|
104+
| `spotlight` | Roaming spotlight illuminates different widgets |
105+
106+
## Effect Details
107+
108+
### aurora
109+
110+
Northern lights effect with flowing color ribbons across the screen.
111+
112+
- **Category:** Background
113+
- **Performance:** Medium (canvas animation)
114+
- **Best with:** Dark themes, space/tech panels
115+
116+
### matrix-rain
117+
118+
Digital rain effect inspired by The Matrix. Green characters fall from top to bottom.
119+
120+
- **Category:** Background
121+
- **Performance:** Medium (canvas animation)
122+
- **Best with:** Cyberpunk theme, system monitoring panels
123+
124+
### scanlines
125+
126+
Classic CRT scanline overlay for a retro computing aesthetic.
127+
128+
- **Category:** Background
129+
- **Performance:** Low (CSS only)
130+
- **Best with:** Any dark theme, retro look
131+
132+
### vhs-static
133+
134+
VHS tape playback simulation with static noise, tracking lines, and occasional tears.
135+
136+
- **Category:** Overlay
137+
- **Performance:** Medium (canvas animation)
138+
- **Best with:** Retro themes, video panels
139+
140+
### film-grain
141+
142+
Old film grain texture with scratches and dust spots for a vintage cinema look.
143+
144+
- **Category:** Overlay
145+
- **Performance:** Medium (canvas animation)
146+
- **Best with:** Any theme, adds texture
147+
148+
### chromatic-aberration
149+
150+
RGB color channel separation effect at screen edges, simulating lens distortion.
151+
152+
- **Category:** Overlay
153+
- **Performance:** Low (CSS transforms)
154+
- **Best with:** Cyberpunk theme, tech panels
155+
156+
### lava-lamp
157+
158+
Colorful blobs that float and merge like a lava lamp.
159+
160+
- **Category:** Background
161+
- **Performance:** Medium (canvas animation)
162+
- **Best with:** RGB gaming theme, casual displays
163+
164+
### confetti
165+
166+
Celebratory confetti particles falling continuously.
167+
168+
- **Category:** Background
169+
- **Performance:** Medium (canvas animation)
170+
- **Best with:** Achievement displays, celebrations
171+
172+
---
173+
174+
*Generated by [LCDPossible](https://github.com/DevPossible/LCDPossible)*

‎docs/panels/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ This directory contains documentation and screenshots for all available display
44

55
**Related Documentation:**
66
- [Themes](../themes/README.md) - Available color themes and customization
7+
- [Page Effects](../effects/README.md) - Animated overlays and backgrounds
78

89
## Panel Categories
910

0 commit comments

Comments
 (0)