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).
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][] = [
[0.91, 0.63, 0.75], // accent rose #E8A0BF
[1.0, 0.94, 0.96], // near-white blush
[0.96, 0.72, 0.63], // peach #F4B8A0
[0.77, 0.71, 0.91], // lavender #C5B4E8
[0.85, 0.55, 0.69], // deeper rose
[1.0, 0.55, 0.74], // bright rose pink
[1.0, 0.74, 0.83], // soft blossom pink
[1.0, 0.66, 0.5], // warm peach
[0.78, 0.56, 1.0], // lavender violet
[1.0, 0.42, 0.66], // deep magenta-rose
]
const VERT = `
@@ -92,7 +93,13 @@ void main() {
else if (idx == 2) col = u_tints[2];
else if (idx == 3) col = u_tints[3];
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
prefer reduced motion (the component renders nothing in that case). */
.petal-fall {
opacity: 0.85;
opacity: 1;
}
/* Honor reduced-motion globally: still the looping ambient animations and drop