Badge Unlock Stamp

A coin struck from two smoothsteps

Distance from the centre does most of the work. One smoothstep mixes the metal from a darker recessed middle to a brighter rim, which reads as a dish. A second, a narrow band between 0.78 and 0.94 masked off again before the edge, adds the inner bevel that makes the face look raised rather than printed.

float dish = smoothstep(0.0, 1.0, r);              // 0 centre -> 1 rimhalf3 base = mix(u_metal * 0.62, u_metal * 1.15, dish);float bevel = smoothstep(0.78, 0.94, r) * (1.0 - smoothstep(0.94, 1.0, r));base += half3(0.18) * bevel;

Grain that follows the rim

Eighty angular striations run around the face at 6% strength, weighted toward the rim by the same dish value so the centre stays calmer than the edge — the way a spun metal finish actually catches light. A hash-based sparkle of plus or minus 1.5%, moving with time, keeps the surface from reading as flat plastic.

float ang = atan(c.y, c.x);float grain = sin(ang * 80.0) * 0.5 + 0.5;         // angular brush linesgrain *= 0.06;base += half3(grain) * (0.4 + 0.6 * dish);base += half3((hash21(uv * u_res * 0.5 + u_time) - 0.5) * 0.03);

Sparks on even slots, then jittered

Purely random angles clump and leave holes; evenly spaced ones look mechanical. Each spark takes its own slice of the circle and is then nudged within 30% of that slot, which scatters them while guaranteeing the ring stays covered. Reach, scale and launch delay are drawn separately, and the shimmer is phased by the spark's own angle, so neighbours never brighten in unison.

const slot = (Math.PI * 2) / n;for (let i = 0; i < n; i++) {  const angle = i * slot + (rand() - 0.5) * slot * 0.6;  // …}// …const shimmer = 0.85 + 0.15 * Math.sin(lt * 18 + s.angle * 4);

• Slam Force1.2
• Sheen Color#FFFFFF
• Sparkle Spikes12