kldh’s gists

kldh / angle-window.astro

Created April 28, 2026 15:42 — forked from WALKAL0NE/angle-window.astro

WALKALONE_LAB — angle-window.astro

	---
	import Layout from '@/layouts/Layout.astro';
	import { loopCount } from '@walkal0ne/lasagna';

	export const options = {
	title: 'Angle Window',
	description: 'Stacked rings of windows rotating in 3D, each row independently controlled.',
	created: '20260427',
	ref: 'https://youtu.be/QWN4nZUt39M?si=nZbQC9TYejXH8xVI/'
	}

kldh / README.md

Created April 8, 2026 10:09 — forked from alexanderbuhler/README.md

Tailwind v4 polyfill / browser compatibility configuration

This gist may be your full solution or just the starting point for making your Tailwind v4 projects backwards compatible.

Effectively getting browser support down to Chrome 99 (and basically everything supporting @layer)
Pre-compute oklab() functions
Pre-compute color-mix() functions (+ replace CSS vars inside them beforehand)
Remove advanced instructions (colorspace) from gradients
Provide support for nested CSS (used by dark mode or custom variants with &)
Transform translate, scale, rotate properties to their transform: ... notation
Add whitespace to var fallbacks var(--var,) > var(--var, ) to help older browsers understand

kldh / DissipateTextInput.tsx

Created October 23, 2025 06:33 — forked from m1guelpf/DissipateTextInput.tsx

	'use client'

	import useMeasure from 'react-use-measure'
	import { ChangeEvent, FC, FormEvent, InputHTMLAttributes, useCallback, useState } from 'react'

	enum Status { Idle, Error, Loading, Animate, Success }

	const EmailInput = ({ onSubmit, ...props }) => {
	const [formRef, dimensions] = useMeasure()
	const [value, setValue] = useState<string>('')

kldh / ContentView.swift

Created June 15, 2025 08:18 — forked from dkun7944/ContentView.swift

AirDrop iOS 17 Swift.Shader Animation

kldh / glass.html

Created June 11, 2025 05:41 — forked from rebane2001/glass-with-controls.html

glass effect test css/svg thing (messy) - demo: https://codepen.io/rebane2001/details/OPVQXMv

	<div style="position:absolute;top:-999px;left:-999px">
	<svg
	width="200"
	height="200"
	viewBox="0 0 220 220"
	xmlns="http://www.w3.org/2000/svg">


	<filter id="displacementFilter4">
	<feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%230001' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing9" />

kldh / coverflow-animation.tsx

Created October 30, 2024 04:30 — forked from devalade/coverflow-animation.tsx

Coverflow animation

	import { PropsWithChildren, useEffect, useState } from "react";
	import { Container } from "~/components/container";
	import { ArrowLeft, ArrowRight } from "lucide-react";
	import { range } from "~/utils/range";

	const IMAGES = [
	{
	id: 1,
	url: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg",
	},

kldh / DOM3D.js

Created March 27, 2024 15:44 — forked from OrionReed/dom3d.js

3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.

	// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
	// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
	(() => {
	const SHOW_SIDES = false; // color sides of DOM nodes?
	const COLOR_SURFACE = true; // color tops of DOM nodes?
	const COLOR_RANDOM = false; // randomise color?
	const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
	const MAX_ROTATION = 180; // set to 360 to rotate all the way round
	const THICKNESS = 20; // thickness of layers
	const DISTANCE = 10000; // ¯\\_(ツ)_/¯

kldh / components.tsx

Created December 18, 2023 06:20 — forked from borispoehland/components.tsx

	import {
	ElementRef,
	ForwardRefExoticComponent,
	createElement,
	forwardRef,
	} from "react";
	import { cn } from "./utils";

	export function extend<T extends { className?: string }>(
	Component: ForwardRefExoticComponent<T>,

Khang Le Duong Hoang kldh