The avatar for @muxingchen
Muxing's space
Public
Edited
Apr 21
Importers
Insert cell
Insert cell
Insert cell
GSAP = require("https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js")
Insert cell
Insert cell
Insert cell
tailwind = import("https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4")
Insert cell
<div class="text-pink-500 font-sans">Hello Tailwind!</div>
Insert cell
Insert cell
Lenis = require("https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0/dist/lenis.min.js")
Insert cell
lenis = {
// Clean up when the notebook invalidates the cell
invalidation.then(() => lenis.destroy());

const lenis = new Lenis();

function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}

requestAnimationFrame(raf);
return lenis;
}
Insert cell
Insert cell
THREE = import("three@0.175.0/build/three.module.js")
Insert cell
orbitControlsModule = import(
"three@0.175.0/examples/jsm/controls/OrbitControls.js"
)
Insert cell
OrbitControls = orbitControlsModule.OrbitControls
Insert cell
Insert cell
lilGUIModule = import("https://cdn.jsdelivr.net/npm/lil-gui@0.20/+esm")
Insert cell
GUI = lilGUIModule.GUI
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more