Role
Lead designer and developer
Team
Rastin Rassoli, Ishika Arora
Tools
Figma, Three.js, React, GLSL
Skills
Web Development, Design
Background
Smile is a student mental health and inner-life enrichment club focused on promoting campus wellness. As the lead of the design team for nearly a year, I have been responsible for revamping the current website, designing posts for the Instagram page and establishing a clear visual Identity for SMILE.
Instagram Posts
I created a design guideline for our social media team to simplify and streamline the process of creating posts. The guideline highlights our typography, color palette, and key visual elements to maintain a consistent look across all our content. You can read more about it on this Notion page.
New Smile Website
We’re in the process of redesigning our website, but you can explore the in-progress version . Similar to our Instagram, the updated design features vibrant gradients as the key visual element aligning with SMILES positive values.
When deciding how to implement the gradient, we explored CSS tools like radial-gradient,linear-gradient and layer-blurwhich can be animated using a keyframes. While these methods work well for simpler effects, they are not ideal for creating layered gradient patterns as seen in the hero section.
Shaders
Shaders allow us to fully customize the patterns of the gradient by using dynamic, noise-based or volumetric methods to compute them. It runs on the GPU and calculated the colour for each pixel rendered and is optimized to work independently from the React render cycle.
To generate the gradient we utilized the cosine gradient Library by Thi.ng/Color. The formula allows to create a smooth, continuous gradient based on the cosine function. It works by oscillating the intensity of RGB values using in the function where each wave represents a color channel, and their amplitudes, frequencies, and phases determine the gradients appearance.
Cosine Function
vec3 cosineGradientColor(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d)
{
return clamp(a + b * cos(6.28318 * (c * t + d)), 0.0, 1.0);
}Fragment Shader
void main() {
vec2 uv = vUv;
uv *= uUvScale;
for (float i = 0.0; i < uUvIterations; i++) {
uv += noise(vec3(uv - i * 0.2, (uTime) + i * 32.0)) * uUvIntensity;
}
float colourInput = noise(vec3(uv, sin((uTime)))) * 0.5 + 0.5;
vec3 colour = cosineGradientColor(colourInput, uColourPalette[0],
uColourPalette[1], uColourPalette[2], uColourPalette[3]);
gl_FragColor = vec4(colour, 1.0);
}