Achievement Unlock — Celestial Card Shatters to Rarity Medal

Skia
Reanimated
Haptics

A medal plate that cracks and blows apart. The crack lines and the flying pieces are not two effects that have to agree — they are the same triangles, so what breaks is exactly what leaves.

View plans

Purchases are not open yet.

The cracks are the shard edges

The plate is tessellated into a mesh of triangles covering its whole face. Their shared edges are drawn as the crack lines, and each triangle is the piece that later flies off. Because there is one set of geometry, a crack can never appear where nothing breaks, and no piece can depart along a line that was never drawn.

export interface TriShard extends Shard {  ax: number;  ay: number;  bx: number;  by: number;  cx: number;  cy: number;}

Jitter inside, pinned at the edge

A regular grid breaks like a waffle. Interior vertices are nudged by up to 36% of a cell in each direction, which makes the fracture ragged, while any vertex on the boundary is left exactly where it belongs. That pinning is what keeps the triangles covering the plate with no sliver of background showing along the rim.

const edge = c === 0 || c === cols || r === 0 || r === rows;const jx = edge ? 0 : ((rand() - 0.5) * 0.72) / cols;const jy = edge ? 0 : ((rand() - 0.5) * 0.72) / rows;gx[r][c] = Math.min(1, Math.max(0, c / cols + jx));gy[r][c] = Math.min(1, Math.max(0, r / rows + jy));// …const flip = (r + c) % 2 === 0; // alternate the diagonal for variety

Each piece carries its own artwork

The triangles are built in unit plate coordinates, and the same corners multiplied by the image size become texture coordinates handed to SkVertices. A shard therefore samples exactly the pixels that sat under it before the break, so the medal stays legible as it comes apart rather than dissolving into coloured fragments.

for (const triangle of triangles) {  coordinates.push(    { x: triangle.ax * width, y: triangle.ay * height },    { x: triangle.bx * width, y: triangle.by * height },    { x: triangle.cx * width, y: triangle.cy * height },  );}

<AchievementUnlockShatter params={{ shardCount: 36 }} fireSignal={0} />