kldh’s gists

WALKAL0NE / angle-window.astro

Created April 28, 2026 00:39

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/'
	}

rebane2001 / glass-with-controls.html

Last active April 15, 2026 16:21

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

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


	<filter id="displacementFilter4">

m0hill / result.ts

Last active May 13, 2025 08:13

typescript implementation of the result pattern for functional error handling. provides type-safe alternatives to try/catch with monadic operations for composition. use this to make error handling explicit in your function signatures and avoid throwing exceptions

	import { inspect } from 'util'

	export type Success<T> = {
	readonly type: 'success'
	readonly data: T
	readonly error?: never
	}

	export type Failure<E> = {
	readonly type: 'failure'

m1guelpf / DissipateTextInput.tsx

Created March 4, 2025 01:50

	'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>('')

Saadnajmi / Ripple.tsx

Created December 29, 2024 06:31

Ripple Effect Shader with react-native-skia

	import { Canvas, Circle, Group, Rect, Shader, Skia, useClock, RuntimeShader, SkRuntimeEffect, RoundedRect } from "@shopify/react-native-skia";
	import { SafeAreaView, StyleSheet } from "react-native";
	import { useDerivedValue, useSharedValue } from "react-native-reanimated";
	import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';

	const styles = StyleSheet.create({
	centered: {
	flex: 1,
	alignItems: 'center',
	justifyContent: 'center',

crutchcorn / line-draw.html

Created April 1, 2024 19:49

The code for this: https://twitter.com/crutchcorn/status/1774695605455224871

	<html lang="en">
	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width"/>
	</head>
	<body style="height: 300vh">
	<svg style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"
	width="655" height="209" viewBox="0 0 655 209" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M653 207V62C653 28.8629 626.228 2 593.091 2C519.318 2 391.639 2 292.675 2C270.583 2 252.717 19.9124 252.717 42.0038C252.717 63.5378 252.717 81.7221 252.717 81.7221C252.717 81.7221 252.717 81.7221 252.717 81.7221V167C252.717 189.091 234.808 207 212.717 207H2"
	stroke="#EAECF0" stroke-width="4" stroke-linecap="round"/>

OrionReed / dom3d.js

Last active May 4, 2026 11:01

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; // ¯\\_(ツ)_/¯

KristofferEriksson / useTextSelection.ts

Last active March 24, 2025 14:37

A React Typescript hook that tracks user text selections & their screen positions

	import { useEffect, useState } from "react";

	type UseTextSelectionReturn = {
	text: string;
	rects: DOMRect[];
	ranges: Range[];
	selection: Selection \| null;
	};

	const getRangesFromSelection = (selection: Selection): Range[] => {

borispoehland / components.tsx

Last active July 8, 2024 04:26

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

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

florianmaxim / DemoReactNativeHorizontalSwipePanNavigation.js

Created October 19, 2018 15:52

Demo React Native Horizontal Swipe/Pan Navigation

	import React from 'react';

	import { Animated, Easing, PanResponder, Text, View, TextInput, ActivityIndicator, Dimensions, Button, TouchableHighlight } from 'react-native';

	import config from './config';

	export default class Home extends React.Component {

	constructor(props){
	super(props)

Khang Le Duong Hoang kldh