Skip to content

Commit

Permalink
💄 Revamp signature banner (#1909)
Browse files Browse the repository at this point in the history
* ♻️ Refactor NFTBookSignatureBanner mockup

* ✨ Revamp mockup in signature banner

* 💫 Add signature animation

* 💩 Use absolute position to mitigate Safari issue

* 💄 Prevent mockup collapse by banner text

* 💫 Animate signature page text

* 💬 Update signature banner names & messages

Co-authored-by: William Chong <[email protected]>

* 💫 Shuffle messages & names in signature banner

---------

Co-authored-by: William Chong <[email protected]>
  • Loading branch information
nwingt and williamchong authored Oct 25, 2024
1 parent 49e692d commit 8a52495
Show file tree
Hide file tree
Showing 9 changed files with 252 additions and 10 deletions.
14 changes: 14 additions & 0 deletions functions/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions functions/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
"jwt-decode": "^4.0.0",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"lottie-web-vue": "^1.2.1",
"lru-cache": "^10.0.0",
"magic-grid": "^3.2.4",
"marked": "^5.1.2",
Expand Down
177 changes: 177 additions & 0 deletions src/components/NFTBook/SignatureBanner/Mockup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<template>
<div class="flex justify-center items-end w-full px-[16px]">
<div class="relative w-[240px] desktop:w-[300px]">
<svg
class="w-full"
viewBox="0 0 260 240"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<image
x="0"
y="0"
width="260"
height="241"
:xlink:href="deviceFrameImage"
/>
<path
opacity="0.5"
d="M56.8808 95.4708C59.4748 96.1452 61.2388 97.1828 61.2388 99.5693C61.2388 101.229 59.9936 102.578 57.9703 102.578C55.6876 102.578 54.2868 100.814 54.2868 97.9091C54.2868 94.7444 55.8951 90.179 61.135 88L61.9651 89.297C58.4372 91.0091 57.0883 93.6031 56.8808 95.4708ZM46.1935 95.4708C48.7875 96.1452 50.5514 97.1828 50.5514 99.5693C50.5514 101.229 49.3063 102.578 47.283 102.578C45.0003 102.578 43.6514 100.814 43.6514 97.9091C43.6514 94.7444 45.2597 90.179 50.4477 88L51.2778 89.297C47.7499 91.0091 46.4529 93.6031 46.1935 95.4708Z"
fill="#CECECE"
/>
</svg>
<client-only>
<div
ref="nameText"
:class="[
textClasses,
'top-[42px] desktop:top-[52px]',
'text-[12px] desktop:text-[16px]',
]"
/>
<div
ref="messageText"
:class="[
textClasses,
'top-[96px] desktop:top-[120px]',
'text-[16px] desktop:text-[20px]',
'whitespace-pre-line',
]"
/>
<LottieAnimation
:class="[
'absolute',
'top-[158px] desktop:top-[196px]',
'left-[25px] desktop:left-[32px]',
'w-[80px] desktop:w-[100px]',
]"
:animation-data="animationData"
:auto-play="true"
:loop="true"
:speed="1"
/>
</client-only>
</div>
</div>
</template>

<script>
import LottieAnimation from 'lottie-web-vue';
import { fisherShuffle } from '~/util/misc';
import SignatureAnimation from './signature-animation.json';
const deviceFrame = require('./device-frame.png');
const NAMES = [
'Aurora',
'Bob',
'Carol',
'David',
'Edmond',
'Phoebe',
'William',
'一心',
'有容',
'允行',
'修端',
'念慈',
];
const MESSAGES = [
'不怕,我們有彼此。',
'Thank you for your support.',
'感謝支持!',
'真理在胸筆在手\n無私無畏即自由',
'錦瑟無端五十弦\n一弦一柱思華年',
'去留肝膽兩崑崙',
'杜絕文青!',
'天涼好個秋',
'My pen is blue, \nMy friend is you.',
'見書如見人',
'臨表涕零\n不知所言',
];
export default {
name: 'NFTBookSignatureBanner',
components: {
LottieAnimation,
},
computed: {
deviceFrameImage() {
return deviceFrame;
},
animationData() {
return SignatureAnimation;
},
textClasses() {
return [
'absolute',
'left-[40px] desktop:left-[50px]',
'text-[#333]',
'font-serif',
'w-[160px] desktop:w-[200px]',
];
},
},
mounted() {
this.animateText();
},
beforeDestroy() {
this.$gsap.gsap.killTweensOf(this.$refs.nameText);
this.$gsap.gsap.killTweensOf(this.$refs.messageText);
},
methods: {
animateText() {
const timeline = this.$gsap.gsap.timeline({
onComplete: this.animateText,
});
const names = fisherShuffle([...NAMES]);
const messages = fisherShuffle([...MESSAGES]);
messages.forEach((message, index) => {
const name = names[index % names.length];
// Show char by char
`${name},`.split('').forEach(char => {
timeline.to(
{},
{
duration: 0.1,
onComplete: () => {
this.$refs.nameText.textContent += char;
},
}
);
});
message.split('').forEach(char => {
timeline.to(
{},
{
duration: 0.1,
onComplete: () => {
this.$refs.messageText.textContent += char;
},
}
);
});
// Clear text
timeline.to(
{},
{
duration: 1,
onComplete: () => {
this.$refs.nameText.textContent = '';
this.$refs.messageText.textContent = '';
},
}
);
});
},
},
};
</script>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 44 additions & 10 deletions src/components/NFTBook/SignatureBanner/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
:is="tag"
:class="[
'relative',
'desktop:mt-[30px]',
'rounded-[24px]',
{ 'cursor-pointer': $listeners.click },
]"
Expand Down Expand Up @@ -41,7 +42,9 @@
'flex',
'flex-col-reverse desktop:flex-row',
'items-center',
'items-stretch',
'min-h-[248px]',
'text-like-green',
Expand All @@ -55,16 +58,52 @@
'overflow-hidden desktop:overflow-visible',
]"
>
<img
class="w-full max-w-[450px] desktop:ml-[-56px] phone:scale-[1.2] phone:translate-x-[-20%]"
:src="signedBookImage"
<svg
class="absolute top-[64px] desktop:top-auto desktop:bottom-0 right-0 pointer-events-none"
width="341"
height="204"
viewBox="0 0 341 204"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 205.98C81.5047 189.285 158.164 169.23 229.878 126.019C245.25 116.757 420.431 3 305.458 3C255.104 3 183.33 44.7765 173.69 107.168C165.158 162.387 221.074 160.829 253.425 157.334C299.394 152.368 341.965 130.12 385.183 112.945C444.728 89.2811 540.595 57.2426 505.835 134.76"
stroke="#FBF9DD"
stroke-width="5.5"
stroke-linecap="round"
/>
</svg>

<svg
class="hidden desktop:block absolute bottom-0 left-0 pointer-events-none"
width="242"
height="182"
viewBox="0 0 242 182"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M-72.3261 3C-81.7475 3 -91.5897 8.07559 -100.114 11.4292C-123.096 20.4717 -150.782 36.3323 -159.758 60.842C-168.933 85.8973 -124.753 88.1046 -110.345 88.5713C-65.8881 90.0112 -21.8517 78.2798 22.4301 76.4797C35.0163 75.9681 42.0411 77.1606 50.0432 85.1415C61.4349 96.503 16.8554 118.845 50.0432 128.396C83.2309 137.948 122.643 128.662 156.019 124.381C182.41 120.996 209.05 119.165 235.312 114.964"
stroke="#FBF9DD"
stroke-width="5.5"
stroke-linecap="round"
/>
</svg>

<NFTBookSignatureBannerMockup
class="relative desktop:mt-[-30px] desktop:max-w-[420px] shrink-0"
/>

<div
:class="[
'relative',
'flex',
'flex-col',
'justify-center',
'px-[24px]',
'py-[32px]',
'desktop:pl-[32px]',
'desktop:pl-[0]',
'desktop:p-[48px]',
]"
>
Expand Down Expand Up @@ -99,7 +138,6 @@
</template>

<script>
const signedBookImage = require('./signed-book.png');
const videoThumbnail = require('./video-thumbnail.jpg');
export default {
Expand Down Expand Up @@ -138,10 +176,6 @@ export default {
this.$t('nft_book_signature_banner_author')
);
},
signedBookImage() {
// TODO: Dynamically show the signed book image based on author
return signedBookImage;
},
bgVideoStyle() {
return {
backgroundImage: `url(${videoThumbnail})`,
Expand Down

Large diffs are not rendered by default.

Binary file not shown.
14 changes: 14 additions & 0 deletions src/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
"jwt-decode": "^4.0.0",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"lottie-web-vue": "^1.2.1",
"lru-cache": "^10.0.0",
"magic-grid": "^3.2.4",
"marked": "^5.1.2",
Expand Down

0 comments on commit 8a52495

Please sign in to comment.