-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2d61afa
commit dbd5149
Showing
8 changed files
with
106 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,80 @@ | ||
| <script setup lang="ts"> | ||
| const { url } = defineProps<{ url: string }>(); | ||
| const maskUrl = `url(${url})`; | ||
| const easing = 0.05; | ||
| const max = 15; | ||
| const { url, rotate } = defineProps<{ url: string; rotate?: string }>(); | ||
| const maskUrl = `url(${url})`; | ||
| const element = ref<HTMLElement>(); | ||
| const center = ref<{ x: number; y: number }>(); | ||
| const pointer = usePointer(); | ||
| const rotateY = computedWithPrev<number>((prev) => { | ||
| if (!element.value) return 0; | ||
| const rect = element.value.getBoundingClientRect(); | ||
| const center = rect.left + rect.width / 2; | ||
| const result = -(center - pointer.x); | ||
| const capped = Math.min(Math.max(result, -max), max); | ||
| return prev + (capped - prev) * easing; | ||
| const y = computedWithPrev<number>((prev) => { | ||
| if (!center.value) return 0; | ||
| return ease(-(center.value.x - pointer.x), prev); | ||
| }); | ||
| const x = computedWithPrev<number>((prev) => { | ||
| if (!center.value) return 0; | ||
| return ease(center.value.y - pointer.y, prev); | ||
| }); | ||
| const rotateX = computedWithPrev<number>((prev) => { | ||
| if (!element.value) return 0; | ||
| const rect = element.value.getBoundingClientRect(); | ||
| const center = rect.top + rect.height / 2; | ||
| const result = center - pointer.y; | ||
| const fromCenter = computed(() => { | ||
| if (!center.value) return 0; | ||
| const distance = Math.hypot(center.value.x - pointer.x, center.value.y - pointer.y); | ||
| return Math.max(distance / 200, 2) / 4; | ||
| }); | ||
| function ease(result: number, prev: number, max = 15, easing = 0.05) { | ||
| const capped = Math.min(Math.max(result, -max), max); | ||
| return prev + (capped - prev) * easing; | ||
| } | ||
| onMounted(() => { | ||
| const { width, height, top, left } = element.value!.getBoundingClientRect(); | ||
| center.value = { x: left + width / 2, y: top + height / 2 }; | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div ref="element" class="sticker relative" :style="{ '--x': rotateX, '--y': rotateY }"> | ||
| <img class="drop-shadow-lg" :src="url" alt="" /> | ||
| <div class="shine absolute inset-0" /> | ||
| <div> | ||
| <div | ||
| ref="element" | ||
| class="sticker relative" | ||
| :style="{ '--x': x, '--y': y, '--from-center': fromCenter, '--rotate': rotate }" | ||
| > | ||
| <img class="drop-shadow-lg" :src="url" alt="" /> | ||
| <div class="shine absolute inset-0" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .sticker { | ||
| transform: perspective(300px) rotateX(calc(var(--x) * 1deg)) rotateY(calc(var(--y) * 1deg)); | ||
| * { | ||
| transform: rotate(var(--rotate)); | ||
| } | ||
| } | ||
| .shine { | ||
| mask-image: v-bind(maskUrl); | ||
| background-image: repeating-linear-gradient(-45deg, black, white 5%, black 10%), | ||
| repeating-linear-gradient( | ||
| 0deg, | ||
| hsla(283, 49%, 60%, 0.75) calc(5% * 1), | ||
| hsla(2, 74%, 59%, 0.75) calc(5% * 2), | ||
| hsla(53, 67%, 53%, 0.75) calc(5% * 3), | ||
| hsla(93, 56%, 52%, 0.75) calc(5% * 4), | ||
| hsla(176, 38%, 50%, 0.75) calc(5% * 5), | ||
| hsla(228, 100%, 77%, 0.75) calc(5% * 6), | ||
| hsla(283, 49%, 61%, 0.75) calc(5% * 7) | ||
| ); | ||
| background-size: 400%, 100%; | ||
| mask-size: calc(100% - 2px); | ||
| mask-position: 1px; | ||
| mask-repeat: no-repeat; | ||
| background-image: url(/images/noise.png), | ||
| repeating-linear-gradient(-45deg, black, white 5%, black 10%), | ||
| repeating-linear-gradient(purple, red, yellow, green, cyan, purple); | ||
| background-size: | ||
| 50% 50%, | ||
| 400% 400%, | ||
| 400% 400%; | ||
| background-position: | ||
| calc(var(--y) * 1px) calc(var(--x) * 1px), | ||
| calc(var(--x) * 1px) calc(var(--y) * 1px); | ||
| background-blend-mode: color-burn; | ||
| center center, | ||
| calc(var(--y) * 1% - 100%) calc(var(--x) * 1% - 100%), | ||
| calc(var(--x) * 5%) calc(var(--y) * 5%); | ||
| background-blend-mode: overlay, color-burn; | ||
| mix-blend-mode: plus-lighter; | ||
| filter: brightness(calc((0.5 * 0.3) + 0.5)) contrast(2.3) saturate(1); | ||
| filter: brightness(var(--from-center)) contrast(3); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes