mattgperry’s gists

mattgperry / SwipeableCard.tsx

Created September 23, 2025 07:31

	/**
	Simplified version of https://examples.motion.dev/react/card-stack
	**/

	import { motion, useMotionValue, useTransform, animate } from "framer-motion"

	function SwipeableCard() {
	const x = useMotionValue(0)
	const rotate = useTransform(x, [-200, 200], [-25, 25])

mattgperry / gist:57c21f25c98b68da89eedbf00846f127

Created July 24, 2025 11:59

	[vxrn] cleaning
	[rerouteNoExternalConfig] delete userViteConfig.ssr.noExternal

	➡ [tamagui] built config and components (161ms)
	🚨 Error applying patch to html-entities
	[Error: ENOENT: no such file or directory, open '/Users/matt/Sites/tamagui/node_modules/html-entities/lib/index.js'] {
	errno: -2,
	code: 'ENOENT',
	syscall: 'open',
	path: '/Users/matt/Sites/tamagui/node_modules/html-entities/lib/index.js'

mattgperry / Blur.tsx

Created July 3, 2025 08:05

mattgperry / modern-framer-override.tsx

Created January 16, 2025 10:32

An example of modern Framer override APIs


	import type { ComponentType } from "react"
	import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

	const useStore = createStore({
	myVariant: "A"
	})

	export function withSetVariant(Component): ComponentType {
	return (props) => {

mattgperry / index.html

Created February 1, 2024 14:35

Number.toString() #jsbench #jsperf (https://jsbench.github.io/#bbe25417c2edc2573bf060860d23e23e) #jsbench #jsperf

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Number.toString() #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

mattgperry / pregenerated-keyframe-performance.html

Last active January 13, 2024 16:48

Pre-generated keyframes performance issues in Chrome

	<html>
	<head>
	<title>Pre-generated keyframes performance</title>
	<!--
	This file demonstrates that the performance of pre-generated keyframes is poor in Chrome
	under surprising circumstances.

	Specifically, pre-generated keyframes are fine in isolation. But when combined with a
	requestAnimationFrame animation, AND another WAAPI animation, performance becomes
	(literally) 100x worse.

mattgperry / useGreensock.js

Last active February 20, 2023 15:19

Simplify the use of Greensock and React

	function useGreensock(callback, deps, optionalScope) {
	const defaultScope = useRef()
	const scope = optionalScope \|\| defaultScope

	useLayoutEffect(() => {
	const context = gsap.context(callback, scope)

	return () => context.revert()
	}, deps)

mattgperry / TextSplit.tsx

Created October 29, 2020 15:25

TextSplit

	'The animator’s JavaScript toolbox.'.split('').map((character, i) => (
	<TaglineCharacter index={i} key={i} character={character} />
	))

	function TaglineCharacter({ character, index }) {
	const ref = useRef(null);

	useEffect(() => {
	const controls = animate({
	from: 0,

mattgperry / talk-demo-source.tsx

Created October 27, 2020 19:09

	import {
	AnimatePresence,
	AnimateSharedLayout,
	motion,
	useMotionValue,
	useIsPresent,
	} from "framer-motion";
	import * as React from "react";
	import { useEffect, useRef, useState } from "react";
	import { shuffle } from "lodash";

mattgperry / FullScreenSpaceJump.tsx

Created October 13, 2020 16:45

	import { useEffect } from "react";

	function handleSpace(event: KeyboardEvent) {
	if (event.key === " ") {
	event.preventDefault();
	const delta = event.shiftKey ? -window.innerHeight : window.innerHeight;
	window.scrollTo(0, window.scrollY + delta);
	}
	}

Matt Perry mattgperry