drwily/petal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Petals: saturated blossom tints + glossy shading

Browse Source 
The pale pastel tints washed out to grey over the cream canvas. Use
saturated cherry-blossom colors, add a luminous centre + soft base
shadow per petal, and render at full opacity so they read as colorful.

Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd
This commit is contained in:
prosolis
2026-06-26 07:41:53 -07:00
parent 8cf78130bf
commit f6fa73b17b
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/effects/PetalFall.tsx
View File

@@ -12,13 +12,14 @@ import { useEffect, useRef } from 'react'
// the petal's static randomness (lane, speed, size, sway, tint, spin). // the petal's static randomness (lane, speed, size, sway, tint, spin).
const PETAL_COUNT = 26 const PETAL_COUNT = 26
// Soft Petal-palette tints (rose / blush / lavender), as RGB 0..1. // Cherry-blossom tints — saturated enough to read as colorful petals over the
// warm cream canvas (pale pastels just wash out to grey). RGB 0..1.
const TINTS: [number, number, number][] = [ const TINTS: [number, number, number][] = [
[0.91, 0.63, 0.75], // accent rose #E8A0BF [1.0, 0.55, 0.74], // bright rose pink
[1.0, 0.94, 0.96], // near-white blush [1.0, 0.74, 0.83], // soft blossom pink
[0.96, 0.72, 0.63], // peach #F4B8A0 [1.0, 0.66, 0.5], // warm peach
[0.77, 0.71, 0.91], // lavender #C5B4E8 [0.78, 0.56, 1.0], // lavender violet
[0.85, 0.55, 0.69], // deeper rose [1.0, 0.42, 0.66], // deep magenta-rose
] ]
const VERT = ` const VERT = `
@@ -92,7 +93,13 @@ void main() {
else if (idx == 2) col = u_tints[2]; else if (idx == 2) col = u_tints[2];
else if (idx == 3) col = u_tints[3]; else if (idx == 3) col = u_tints[3];
else if (idx == 4) col = u_tints[4]; else if (idx == 4) col = u_tints[4];
gl_FragColor = vec4(col, m * v_alpha * 0.55); // Glossy core: brighten toward the petal's centre and deepen the lower edge
// so each blossom has a little dimensional shading instead of a flat blob.
vec2 p = v_uv - vec2(0.5);
float core = smoothstep(0.5, 0.05, length(p));
col = mix(col, vec3(1.0), core * 0.35); // luminous centre
col = mix(col * 0.82, col, smoothstep(-0.4, 0.4, p.y)); // soft shadow at base
gl_FragColor = vec4(col, m * v_alpha * 0.92);
} }
` `

2
web/src/index.css
View File

@@ -388,7 +388,7 @@ button, a, input {
the writing. It hides itself in print and is skipped entirely for users who the writing. It hides itself in print and is skipped entirely for users who
prefer reduced motion (the component renders nothing in that case). */ prefer reduced motion (the component renders nothing in that case). */
.petal-fall { .petal-fall {
opacity: 0.85; opacity: 1;
} }
/* Honor reduced-motion globally: still the looping ambient animations and drop /* Honor reduced-motion globally: still the looping ambient animations and drop