# Shaders is Now Open Source by Shaders

High-energy announcement promo showcasing Shaders going open source, highlighting over 200 interactive shader components and real-world website and product UI applications.

- Company: Shaders
- Year: 2024
- Duration: 0:30
- Type: Product launch
- Objective: Announce
- Industry: Creative tools
- Audience: Developer
- Medium: Product UI, Typography, 3D, 2D animation
- Style: Bold, Technical, Playful
- Techniques: Rapid cutting, Kinetic type, UI choreography, Compositing
- Structure: Feature montage
- Pace: Fast
- Audio: Music-led
- Format: Landscape

## Observations

- High-speed transitions synced tightly to a choppy, rhythmic electronic hip-hop beat
- Demonstration of diverse visual effects including halftone, liquid glass, gradients, scanlines, and ASCII rendering
- Component tags visually display names of shaders like SimplexNoise, Prism, LensDistortion, and FlowField
- Shows UI design integration in mockups and web editor interfaces before concluding on the brand mark

## Moments

### 0:00–0:08 · Open Source Announcement

Glitchy, liquid glass effects and bold kinetic typography reveal that Shaders is officially open source.

Tags: Kinetic type, 3D, Announce

Link: https://motionreference.com/reference/cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31?t=0 · Moment id: `cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31-m0`

### 0:08–0:16 · 200+ Shader Components

A dense grid of interactive code-tagged components gives way to a rapid montage of distinct visual shaders.

Tags: Feature montage, Rapid cutting, Creative tools

Link: https://motionreference.com/reference/cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31?t=8 · Moment id: `cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31-m1`

### 0:16–0:21 · Real-World UI & Ship Magic

Demonstrates shaders applied onto mobile app mockups, landing page headers, and editor control panels.

Tags: Product UI, UI choreography

Link: https://motionreference.com/reference/cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31?t=16 · Moment id: `cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31-m2`

### 0:21–0:30 · Logo Outro

The Shaders logo resolves against a dark, fluidly illuminated abstract background.

Tags: Brand film, Compositing

Link: https://motionreference.com/reference/cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31?t=21 · Moment id: `cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31-m3`

## Links

- Motion Reference page: https://motionreference.com/reference/cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31
- Watch: https://attachments.are.na/51256263/3e9e7837d443c85c35bc4b03cdb19ad9.mp4?1791711000
- Original: https://x.com/npm_i_shaders/status/2107467668009963819/video/1
- Video id: `cb5b8c79-dc5e-4789-a2f7-c4ed368b4b31` (use with the MCP tools get_reference, get_breakdown and get_related_references)

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