Senior Front-End Engineer · Tech Lead

Cory Schulz

I love to design beautiful experiences and build tools that help other people create more amazing things.

20+ years full-stack
11 years Shopify
5 years design
4 years AI

A Little About Me

I’m the creator of Magic Spells, an open-source suite of web components, and Tarot, a carousel with real physics. I’ve been building for the web for over twenty years. I enjoy building and working with good design systems, in Figma and in code.

I’ve also hired and built front-end teams from the ground up. At Pura I hired and trained the team, then led the full rebuild of pura.com. The relaunch doubled the site’s conversion rate, and Shopify did a case study on it.

pura.com, the Shopify storefront rebuilt at Pura

Shopify case study: rebuilding pura.com

2013–Today

Experience

From a Fortune 500 rewrite to a billion-dollar tequila brand to founding a web app framework and an open-source component library.

2013

Kohl's

Lead Web Developer

Rewrote the Kohls.com front end.

2016

Pair

Co-founder

Launches for Milwaukee Tool and Empire Level.

2018

Fuel Made

Front-End Developer

Custom Shopify themes. Casamigos Tequila.

2022

Pura

Sr. Front-End Developer / Tech Lead

Rebuilt pura.com, hired and trained the team.

2024

Magic Spells

Founder

Open-source web components, the Tarot carousel, and the Puzzle framework.

2025

Elva

Front-End Developer

Dashing Diva, and Grande Cosmetics.

2026

Avex

Sr. Front-End Developer / Tech Lead

Cherokee Uniforms.

'13

Kohl's

Lead Web Developer

Rewrote the Kohls.com front end.
'16

Pair

Co-founder

Launches for Milwaukee Tool and Empire Level.
'18

Fuel Made

Front-End Developer

Custom Shopify themes. Casamigos Tequila.
'22

Pura

Sr. Front-End Developer / Tech Lead

Rebuilt pura.com, hired and trained the team.
'24

Magic Spells

Founder

Open-source web components, the Tarot carousel, and the Puzzle framework.
'25

Elva

Front-End Developer

Dashing Diva, and Grande Cosmetics.
'26

Avex

Sr. Front-End Developer / Tech Lead

Cherokee Uniforms.

Everyday Stack

Tools I use

JavaScript

React

Next.js

Tailwind CSS

Vue.js

Svelte

Node.js

Shopify

Klaviyo

Yotpo

Vercel

Cloudflare

Figma

Sketch

OpenAI

Anthropic

Claude

Vite

Webpack

Rollup

Ghostty

Sublime Text

Free & Open Source

Things I’ve built

magicspells.io/tarot

Tarot

A carousel with real physics.

A springy, scrubbable carousel that you can throw, catch, and scrub by hand. Every frame is driven by a real spring, not a CSS transition.

25kb gzipped
18 effects
10 plugins

Free to use. Find it at magicspells.io

@magic-spells/puzzle

Puzzle

A complete web app framework that’s simpler and faster to use than React, Vue, and Svelte.

A front-end web app framework: single-file .pzl components, reactive data, and a Go + esbuild compiler.

21kb gzipped
Over 90 prebuilt components in Puzzle Pieces
Compiler written in Go for quick compile times
Router, datastore, and view animations built in

$ npm i @magic-spells/puzzle

Preview the music app

<puzzle-view>
  <button class="counter" @click={ increment }>
    Clicked { count } times
  </button>
</puzzle-view>

<script>
  export default {
    data: () => ({ count: 0 }),
    increment() {
      this.setData({ count: this.getData().count + 1 });
    },
  };
</script>

@magic-spells/puzzle-pieces

Puzzle Pieces

A complete component library, built for Puzzle.

Primitives, overlays, data display, charts and editors — every one a native .pzl component. The CLI copies the source into your app, so a piece is yours to restyle rather than a dependency to fight.

Over 90 pieces, from Button to DataTable to Kanban
Copied into your app as source, never installed from npm
Tailwind-styled, accessible, and morph-aware
Easy to add using the CLI

$ puzzle add piece button select

Browse the library

Accordion Avatar Breadcrumb Carousel Code Copy Button Dialog Empty Input OTP Markdown Meter Panel Stack Progress Rich Text Select Slider Stat Card Tags Input Toggle

Alert Avatar Group Button Chat Attachment Collapsible Data Table Dropdown Menu Fader Kanban Markdown Editor Multi Select Password Field Progress Ring Rich Text Editor Separator Sparkline Stepper Textarea Toggle Group

Alert Dialog Badge Button Group Chat Message Combobox Date Picker Dropzone Field Kbd Marquee Navigation Menu Pie Chart Quantity Input Scroll Area Sheet Spinner Switch Time Picker Toolbar

Area Chart Bar Chart Calendar Chat Scroller Command Date Range Picker Emoji Picker Hover Card Label Masonry Number Field Popconfirm Radio Group Scroll Stack Sidebar Split Button Table Timeline Tooltip

Aspect Ratio Bottom Sheet Card Checkbox Context Menu Description List Emoji Picker Simple Input Group Line Chart Menubar Pagination Popover Rating Search Field Skeleton Split Panel Tabs Toast Tree

@magic-spells/timeline-engine

Timeline Engine

Choreography you can scrub.

Group animation scenes in a timeline. Drive the timeline with scroll position, scroll trigger, or scrub events. Loop scenes, randomize positions, and use physics based animations.

$ npm i @magic-spells/timeline-engine

@magic-spells/split-text

Split Text

Text that makes an entrance.

A web component that splits a line into words, characters, or measured lines and animates each unit on a CSS-driven stagger. Eight built-in effects, no dependencies, and no framework to adopt. Drop the tag around your copy and it reveals itself when it scrolls into view.

$ npm i @magic-spells/split-text

Text that makes an entrance

Effect

<split-text effect="rise" split="chars">

@magic-spells/morph-engine

Morph Engine

Interfaces that morph into each other.

A spring-driven shared-element morph. It measures what you clicked, flies its rect, radii, background, and shadow into the target’s, and reveals the real element in lockstep. Reverse it mid-flight and it simply turns around.

$ npm i @magic-spells/morph-engine

click to see me morph

@magic-spells/constellation

Constellation

Long-term memory for AI agents.

Plan your project as a connected graph of typed cards: pages, endpoints, tables, flows. Agents read and update the graph as they work, so plans and context survive from session to session instead of starting over every conversation.

Agents build a complete plan before writing code
Plans live as files in your repo
Agents query the plan later for better context
Documentation for your entire project

$ npm i -g @magic-spells/constellation

Plus all of these

What is Magic Spells?

Magic Spells is named for that brain-freeze moment when something just works, feels beautiful, and you want to know how it was done. Frameworks, interface systems, motion engines, and developer tools built to chase that feeling. All free and open source.

Explore magicspells.io

Have a project in mind?

Tell me what you’re building. If it sounds like a good fit, I’ll get back to you as soon as I can.