Spaces:
Runtime error
Runtime error
File size: 706 Bytes
66ed450 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<script lang="ts">
import { spring } from 'svelte/motion';
import type { ZoomTransform } from 'd3-zoom';
export let transform: ZoomTransform;
export let color = '';
export let x = 0;
export let y = 0;
// Spring animation for cursor
const coords = spring(
{ x, y },
{
stiffness: 0.07,
damping: 0.35
}
);
// Update spring when x and y change
$: coords.set({ x, y });
</script>
<div
class="frame"
style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k})`}
/>
<style lang="postcss" scoped>
.frame {
@apply absolute top-0 left-0 border-2 border-sky-500 bg-gradient-to-b from-sky-200 w-[512px] h-[512px];
transform-origin: 0 0;
}
</style>
|