corysimmons

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="856" viewBox="0 0 312.6 446.4">
  <defs>
    <!-- Space Black gradient for body -->
    <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1a1a1c"/>
      <stop offset="50%" stop-color="#161617"/>
      <stop offset="100%" stop-color="#1a1a1c"/>
    </linearGradient>
    <!-- Screen bezel gradient -->
    <linearGradient id="bezelGrad" x1="0%" y1="0%" x2="0%" y2="100%">

corysimmons

name	anim
description	Tasteful, subtle web animations following Emil Kowalski's philosophy and animations.dev principles. Use this skill when adding motion to interfaces - hover states, page transitions, micro-interactions, loading states, or any UI animation. Produces refined, purposeful motion that enhances UX without becoming decorative noise.

Tasteful Web Animation

This skill implements refined, purposeful animations inspired by Emil Kowalski's work and the principles from animations.dev. The goal is motion that feels inevitable and natural - not decorative or attention-seeking.

Core Philosophy

corysimmons

{
  "animation": {
    "none": "none",
    "spin": "spin 1s linear infinite",
    "ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
    "pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
    "bounce": "bounce 1s infinite"
  },
  "aria": {
    "busy": "busy=\"true\"",

corysimmons

{
  "1984": {
    "slug": "vscode-theme-1984",
    "description": "🎶I'm gonna show you where it's dark, but have no fear 🎶",
    "vscUid": "juanmnl.vscode-theme-1984",
    "vscExtensionId": "0f087222-4e48-423c-be9b-5cae196de4bc",
    "installs": 38694,
    "trendingDaily": 0.005171165580721895,
    "trendingWeekly": 0.444720239942083,

corysimmons

[
  "https://vscodethemes.com/e/ms-vscode.cpptools-themes.json",
  "https://vscodethemes.com/e/github.github-vscode-theme.json",
  "https://vscodethemes.com/e/ms-vscode.powershell.json",
  "https://vscodethemes.com/e/zhuangtongfa.material-theme.json",
  "https://vscodethemes.com/e/dracula-theme.theme-dracula.json",
  "https://vscodethemes.com/e/akamud.vscode-theme-onedark.json",
  "https://vscodethemes.com/e/equinusocio.vsc-community-material-theme.json",
  "https://vscodethemes.com/e/equinusocio.vsc-material-theme.json",
  "https://vscodethemes.com/e/johnpapa.winteriscoming.json",

corysimmons

'use server';
import { useServerFetch } from '../hooks/useServerFetch';

export default async function Page() {
  const { loading, error, data } = useServerFetch<any>('/api/123');
  if (loading) return <h1>loading</h1>;
  if (error) return <h1>{error.message}</h1>;
  return <h1>{JSON.stringify(data)}</h1>;
}

corysimmons

'use server';
import { useServerFetch } from '../hooks/useServerFetch';

export default async function Page() {
  const { loading, error, data } = useServerFetch<any>('/api/123');
  if (loading) return <h1>loading</h1>;
  if (error) return <h1>{error.message}</h1>;
  return <h1>{JSON.stringify(data)}</h1>;
}

corysimmons

'use client'
import React, { useRef, useState, useEffect } from 'react';
import { useWavesurfer } from '@wavesurfer/react';
import * as Tone from 'tone';

export default function Page() {
  const containerRef = useRef<HTMLDivElement>(null);
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const [playing, setPlaying] = useState(false);
  const pitchShift = useRef<Tone.PitchShift | null>(null);

corysimmons

// Usage
<div style={{ width: "calc(100vw - 200px)" }}> // Fixed width container
  <DraggableScrollContainer className="styled-scrollbars"> // Style those huge/ugly scrollbars to be aesthetic
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>