shadergradient

SHARE

guestboard

shadergradient

shadergradient

s
h
a
d
e
r
g
r
a
d
i
e
n
t

Create beautiful moving gradients

C
r
e
a
t
e
b
e
a
u
t
i
f
u
l
m
o
v
i
n
g
g
r
a
d
i
e
n
t
s

Create beautiful moving gradients, right on tools like Figma, Framer, or as React component. Users can control the visual expression freely, from colors, shapes to lightings and grain effects.

2022 / overall design, frontend development
product design
side project
webgl
introduction video
introduction video
behind the gradients
All the gradients are a part of moving 3d objects, creating a very natural movement and effect. The movement and the color are calculated and rendered by a set of codes called 'shader'. When a user changes properties, it updates the property of the 3d scene or the shape, and syncs as a url that can be saved and shared.
available for framer, figma and react
available for framer, figma and react
examples
shadergradient website - nominated on framer awards 2022
weekend project from two creatives
We're a team of two - one developer and one designer, who have a huge interest and understanding in each other's domain. This made our process highly collaborative - I, as a designer, worked on a code for shaders and interactions as well, and Ruucm, the developer, worked on the overall usability and marketing of the product as well.


seungmee lee © 2024
interaction designer

last updated/ 2024 May