<style>
:root {
--zero-one: 0;
}
.spritesheet {
--x: calc(mod(round(down, calc(var(--zero-one) * ${cells})), ${cols}) * -${cellW}px);
--y: calc(round(down, calc(var(--zero-one) * ${cells} / ${rows})) * -${cellH}px);
animation: zero-one ${(cells / fps).toFixed(2)}s linear infinite;
width: ${cellW}px;
height: ${cellH}px;
object-fit: none;
object-position: var(--x) var(--y);
}
@keyframes zero-one {
from {
--zero-one: 0;
}
to {
--zero-one: 1;
}
}
@property --zero-one {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
</style>
mutable entry = null
onDropEvent = ((event)=>{
event.preventDefault()
const item = event.dataTransfer.items[0]
if (item.kind !== 'file') return
const file = item.getAsFile()
mutable files = {
name: file.name,
type: file.type,
size: file.size,
webkitRelativePath: file.webkitRelativePath,
lastModified: file.lastModified,
lastModifiedDate: file.lastModifiedDate,
file,
}
mutable entry = item.webkitGetAsEntry()
})
import {newDropArea, dnd} from "@unluckyninja/fileapi"
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.
