# pen.dev - Shaders for Designers by pen.dev

A high-energy launch video showcasing pen.dev's shader design capabilities, illustrating interactive glass, chrome, and refractive effects across web UI components, prompt-driven generation, and real-time parameter tweaking.

- Company: pen.dev
- Duration: 0:41
- Type: Feature launch
- Objective: Announce
- Industry: Creative tools
- Audience: Creator
- Medium: Product UI, Typography, 3D, 2D animation
- Style: Minimal, Technical, Premium, Bold
- Techniques: Kinetic type, UI choreography, Rapid cutting, 3D camera, Morph
- Structure: Hook → reveal
- Pace: Fast
- Audio: Music-led
- Format: Landscape

## Observations

- Chrome pen nib icon serves as a visual anchor at the beginning and the end.
- The word 'shaders' cycles rapidly through various shader render styles including thermal glass, bubble dispersion, metallic chrome, magnifying glass refraction, wireframe, and CRT screens.
- Design elements are categorized by UI role: buttons, logos, heroes, cards, and backgrounds.
- AI prompt input demonstrates natural language shader generation with references to multi-agent collaboration cursors (Claude, Gemini, Minimax, Codex).
- Direct UI manipulation shows seed control, flow speed, perspective, camera roll, and size sliders altering shaders in real time.
- Comprehensive end-credits list classifies every shader effect shown throughout the video.

## Moments

### 0:00–0:09 · Kinetic Shaders Montage

Opening metallic pen nib transitions into rapid-fire visual styles applied to the word 'shaders', punctuated by typography defining shaders 'for designers' and 'by designers'.

Tags: Kinetic type, Chrome, Visual effects

Link: https://motionreference.com/reference/5693e073-c329-4571-a000-089b649fe84f?t=0 · Moment id: `5693e073-c329-4571-a000-089b649fe84f-m0`

### 0:09–0:17 · UI Component Showcase

Demonstrations of interactive shaders applied to buttons, iconography logos, landing page hero modules, responsive cards, and dynamic fluid backgrounds.

Tags: UI choreography, Components, Feature montage

Link: https://motionreference.com/reference/5693e073-c329-4571-a000-089b649fe84f?t=9 · Moment id: `5693e073-c329-4571-a000-089b649fe84f-m1`

### 0:17–0:23 · Prompt-to-Shader & AI Collaboration

User enters a descriptive prompt for black glass text with thermal flow, triggering multi-agent collaborative cursors that style the word 'vibe'.

Tags: Prompting, AI, Collaboration

Link: https://motionreference.com/reference/5693e073-c329-4571-a000-089b649fe84f?t=17 · Moment id: `5693e073-c329-4571-a000-089b649fe84f-m2`

### 0:23–0:30 · Interactive Controls & Vector Manipulation

Real-time adjustment of seed, flow speed, vector shapes, 3D perspective, and fill values showing instantaneous rendering feedback.

Tags: Product UI, Sliders, Real-time

Link: https://motionreference.com/reference/5693e073-c329-4571-a000-089b649fe84f?t=23 · Moment id: `5693e073-c329-4571-a000-089b649fe84f-m3`

### 0:30–0:41 · Logo Lockup & Shader Directory

The chrome pen nib resolves above pen.dev branding, followed by a full catalog screen detailing every shader featured in the video.

Tags: Logo reveal, Call to action, Directory

Link: https://motionreference.com/reference/5693e073-c329-4571-a000-089b649fe84f?t=30 · Moment id: `5693e073-c329-4571-a000-089b649fe84f-m4`

## Links

- Motion Reference page: https://motionreference.com/reference/5693e073-c329-4571-a000-089b649fe84f
- Watch: https://attachments.are.na/51445372/764da18039ed4adda6e382506c7d7070.mp4?1792086480
- Original: https://x.com/tomkrcha/status/2110730915228135884/video/1
- Video id: `5693e073-c329-4571-a000-089b649fe84f` (use with the MCP tools get_reference, get_breakdown and get_related_references)

Cite the Motion Reference page and credit pen.dev when you use this.