Tom Is Loading TomIsLoading

Hey, I'm Tom, I write code and talk about it

TomIsLoading / TailwindTips.tsx

Created February 16, 2024 01:25

	import React from "react";
	import {
	FiBell,
	FiDownload,
	FiEdit,
	FiSave,
	FiSettings,
	FiUser,
	} from "react-icons/fi";
	import { SiAirbnb } from "react-icons/si";

TomIsLoading / MotionTips.tsx

Created March 10, 2024 22:00

	import {
	AnimationPlaybackControls,
	animate,
	motion,
	useMotionTemplate,
	useMotionValue,
	useMotionValueEvent,
	useScroll,
	useTransform,
	} from "framer-motion";

TomIsLoading / MoreTailwindTips.tsx

Created March 23, 2024 19:09

	import React from "react";
	import { FiArrowRight, FiAward, FiUser } from "react-icons/fi";

	export const MoreTailwindStuff = () => {
	return (
	<div className="grid h-screen place-content-center bg-neutral-100">
	<SizeExample />
	{/* <GroupExample /> */}
	{/* <PeerExample /> */}
	{/* <RingExample /> */}

TomIsLoading / ScrollAnimations.tsx

Created March 30, 2024 15:18

	import React, { useEffect, useRef } from "react";
	import {
	motion,
	useInView,
	useMotionValueEvent,
	useScroll,
	useTransform,
	} from "framer-motion";

	export const ScrollAnimations = () => {

TomIsLoading / TimelineExample.tsx

Created July 28, 2024 22:37

	import {
	DOMKeyframesDefinition,
	DynamicAnimationOptions,
	ElementOrSelector,
	useAnimate,
	} from "framer-motion";
	import React, { useEffect, useRef } from "react";

	const TRANSITION: DynamicAnimationOptions = {
	ease: "easeInOut",

TomIsLoading / pretext-basics.html

Created April 9, 2026 01:16

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pretext API Demo</title>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
	</head>
	<body style="font-family: Inter, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px;">

TomIsLoading / dark-mode-toggle.tsx

Created May 6, 2026 15:45

Fancy animated dark mode toggle with React, TailwindCSS & Framer Motion

	import { Dispatch, SetStateAction, useState } from "react";
	import { motion } from "framer-motion";
	import { BsFillCloudyFill, BsStarFill } from "react-icons/bs";

	const ToggleWrapper = () => {
	const [mode, setMode] = useState<"dark" \| "light">("dark");
	return (
	<div
	className={`absolute inset-0 z-100 flex items-center justify-center transition-colors ${
	mode === "dark" ? "bg-slate-900" : "bg-slate-50"