Sophia S. Liau

Sparkle Schemer

August 2026 Interface & Experience Design Personal Project

Sparkle Schemer is a visual bedazzling planner for mapping rhinestone patterns before placing them. It makes it easy to experiment with layouts, colors and spacing digitally, helping creators plan a design and estimate the stones they need before committing it to a physical piece.

Sparkle Schemer rhinestone pattern planner interface

Technical Overview

Built with React, TypeScript and Vite, Sparkle Schemer supports square and honeycomb grids, adjustable rows, columns and stone spacing, and a ten-color rhinestone palette. Click-and-drag painting and erasing make pattern creation quick, while live stone and color counts help with material planning. Designs can be exported as SVG files, and the controls are responsive and keyboard accessible. The project is tested with Vitest and Testing Library.