Skip to content

Instantly share code, notes, and snippets.

View ThimoDEV's full-sized avatar

Thimo ThimoDEV

  • Netherlands, Breda
  • 16:20 (UTC +01:00)
  • X @ThimoDEV
View GitHub Profile
@ThimoDEV
ThimoDEV / dom3d.js
Created August 6, 2024 15:51 — 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; // ¯\\_(ツ)_/¯
// TODO: make `pages` optional and measure the div when unspecified, this will
// allow more normal document flow and make it easier to do both mobile and
// desktop.
import {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useRef,