Revert "feat(animejs): replace motion with animejs for lighter animation (#663)" (#671)

This commit is contained in:
mr. m 2025-06-10 10:46:26 +02:00 committed by GitHub
parent 054b55cc4e
commit 5286397e79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 443 additions and 323 deletions

View file

@ -4,7 +4,6 @@
"files": ["**/*.{ts,js,astro,html,css,json,yml,yaml,md}"],
"words": [
"adam",
"animejs",
"AMOLED",
"Astronav",
"Briel",

View file

@ -37,7 +37,6 @@
"@fortawesome/free-solid-svg-icons": "6.7.1",
"@types/react": "^19.1.6",
"@types/react-dom": "^19.1.5",
"animejs": "^4.0.2",
"astro": "5.7.10",
"astro-navbar": "2.3.7",
"autoprefixer": "10.4.14",
@ -46,6 +45,7 @@
"free-astro-components": "1.2.0",
"jiti": "^2.4.2",
"lefthook": "^1.11.13",
"motion": "^12.15.0",
"postcss": "8.5.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
@ -71,7 +71,6 @@
"@playwright/test": "1.52.0",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/user-event": "14.6.1",
"@types/animejs": "^3.1.13",
"@types/eslint-plugin-jsx-a11y": "6.10.0",
"@types/jsdom": "21.1.7",
"@types/node": "22.15.18",

84
pnpm-lock.yaml generated
View file

@ -44,9 +44,6 @@ importers:
'@types/react-dom':
specifier: ^19.1.5
version: 19.1.5(@types/react@19.1.6)
animejs:
specifier: ^4.0.2
version: 4.0.2
astro:
specifier: 5.7.10
version: 5.7.10(@types/node@22.15.18)(jiti@2.4.2)(rollup@4.41.1)(typescript@5.6.3)(yaml@2.8.0)
@ -71,6 +68,9 @@ importers:
lefthook:
specifier: ^1.11.13
version: 1.11.13
motion:
specifier: ^12.15.0
version: 12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
postcss:
specifier: 8.5.1
version: 8.5.1
@ -141,9 +141,6 @@ importers:
'@testing-library/user-event':
specifier: 14.6.1
version: 14.6.1(@testing-library/dom@10.4.0)
'@types/animejs':
specifier: ^3.1.13
version: 3.1.13
'@types/eslint-plugin-jsx-a11y':
specifier: 6.10.0
version: 6.10.0
@ -373,8 +370,8 @@ packages:
peerDependencies:
'@babel/core': ^7.0.0-0
'@babel/runtime@7.27.6':
resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
'@babel/runtime@7.27.4':
resolution: {integrity: sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==}
engines: {node: '>=6.9.0'}
'@babel/template@7.27.2':
@ -1508,9 +1505,6 @@ packages:
'@tybys/wasm-util@0.9.0':
resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
'@types/animejs@3.1.13':
resolution: {integrity: sha512-yWg9l1z7CAv/TKpty4/vupEh24jDGUZXv4r26StRkpUPQm04ztJaftgpto8vwdFs8SiTq6XfaPKCSI+wjzNMvQ==}
'@types/aria-query@5.0.4':
resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
@ -1832,9 +1826,6 @@ packages:
ajv@8.17.1:
resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
animejs@4.0.2:
resolution: {integrity: sha512-f0L/kSya2RF23iMSF/VO01pMmLwlAFoiQeNAvBXhEyLzIPd2/QTBRatwGUqkVCC6seaAJYzAkGir55N4SL+h3A==}
ansi-align@3.0.1:
resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
@ -2756,6 +2747,20 @@ packages:
fraction.js@4.3.7:
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
framer-motion@12.15.0:
resolution: {integrity: sha512-XKg/LnKExdLGugZrDILV7jZjI599785lDIJZLxMiiIFidCsy0a4R2ZEf+Izm67zyOuJgQYTHOmodi7igQsw3vg==}
peerDependencies:
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
free-astro-components@1.2.0:
resolution: {integrity: sha512-bsT9dWsNlRGDNjqcoIlz6w8NcSCgOpx6oxiwZgYwq9RVbi3JqUImPc6c4Kico2wRJSIXc7HHyr71QgmgXv7nfg==}
@ -3570,6 +3575,26 @@ packages:
resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
engines: {node: '>=16 || 14 >=14.17'}
motion-dom@12.15.0:
resolution: {integrity: sha512-D2ldJgor+2vdcrDtKJw48k3OddXiZN1dDLLWrS8kiHzQdYVruh0IoTwbJBslrnTXIPgFED7PBN2Zbwl7rNqnhA==}
motion-utils@12.12.1:
resolution: {integrity: sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==}
motion@12.15.0:
resolution: {integrity: sha512-HLouXyIb1uQFiZgJTYGrtEzbatPc6vK+HP+Qt6afLQjaudiGiLLVsoy71CwzD/Stlh06FUd5OpyiXqn6XvqjqQ==}
peerDependencies:
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
mrmime@2.0.1:
resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
engines: {node: '>=10'}
@ -5331,7 +5356,7 @@ snapshots:
'@babel/core': 7.27.4
'@babel/helper-plugin-utils': 7.27.1
'@babel/runtime@7.27.6': {}
'@babel/runtime@7.27.4': {}
'@babel/template@7.27.2':
dependencies:
@ -6264,7 +6289,7 @@ snapshots:
'@testing-library/dom@10.4.0':
dependencies:
'@babel/code-frame': 7.27.1
'@babel/runtime': 7.27.6
'@babel/runtime': 7.27.4
'@types/aria-query': 5.0.4
aria-query: 5.3.0
chalk: 4.1.2
@ -6291,8 +6316,6 @@ snapshots:
tslib: 2.8.1
optional: true
'@types/animejs@3.1.13': {}
'@types/aria-query@5.0.4': {}
'@types/babel__core@7.20.5':
@ -6681,8 +6704,6 @@ snapshots:
json-schema-traverse: 1.0.0
require-from-string: 2.0.2
animejs@4.0.2: {}
ansi-align@3.0.1:
dependencies:
string-width: 4.2.3
@ -7929,6 +7950,15 @@ snapshots:
fraction.js@4.3.7: {}
framer-motion@12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
dependencies:
motion-dom: 12.15.0
motion-utils: 12.12.1
tslib: 2.8.1
optionalDependencies:
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
free-astro-components@1.2.0(@types/node@22.15.18)(jiti@2.4.2)(prettier-plugin-astro@0.14.1)(prettier@3.5.3)(rollup@4.41.1)(yaml@2.8.0):
dependencies:
'@astrojs/check': 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.5.3)(typescript@5.6.3)
@ -9008,6 +9038,20 @@ snapshots:
minipass@7.1.2: {}
motion-dom@12.15.0:
dependencies:
motion-utils: 12.12.1
motion-utils@12.12.1: {}
motion@12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
dependencies:
framer-motion: 12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
tslib: 2.8.1
optionalDependencies:
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
mrmime@2.0.1: {}
ms@2.1.3: {}

View file

@ -1,7 +1,10 @@
---
import Image from 'astro/components/Image.astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import ComImage from '~/assets/ComImage.png'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import CheckIcon from '~/icons/CheckIcon.astro'
import GitHubIcon from '~/icons/GitHubIcon.astro'
import { getLocale, getUI } from '~/utils/i18n'
@ -16,85 +19,50 @@ const {
---
<section
id="community"
id="Community"
class="relative flex w-full flex-col items-center gap-6 py-12 text-start md:text-center lg:py-36"
>
<h2 class="mb-2 text-4xl font-bold sm:text-6xl">
<Description class="mb-2 text-4xl font-bold sm:text-6xl">
{
community.title.map(title =>
community.title.map((title, index) =>
title !== '\n' ? (
<span style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
<motion.span client:load {...getTitleAnimation(0.2 + index * 0.2)}>
{title}
</span>
</motion.span>
) : (
<br class="hidden md:block" />
)
)
}
</h2>
<p
class="text-base lg:w-1/2 lg:px-0"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
<span class="opacity-80">{community.description}</span>
</p>
</Description>
<motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2 lg:px-0">
{community.description}
</motion.p>
<div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
<div
class="community__button"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
<motion.span client:load {...getTitleAnimation(0.8)}>
<Button class:list={['px-4']} href="https://github.com/zen-browser">
<GitHubIcon class="size-4" />
<span>{community.lists.freeAndOpenSource.title}</span>
</Button>
</div>
<div
class="community__button flex items-center gap-4"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
</motion.span>
<motion.div client:load {...getTitleAnimation(1)} className="flex items-center gap-4">
<CheckIcon class="size-4" />
<span>{community.lists.simpleYetPowerful.title}</span>
</div>
<div
class="community__button flex items-center gap-4"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
</motion.div>
<motion.div client:load {...getTitleAnimation(1.2)} className="flex items-center gap-4">
<CheckIcon class="size-4" />
<span>{community.lists.privateAndAlwaysUpToDate.title}</span>
</div>
</motion.div>
</div>
<span class="flex max-w-full lg:max-w-none lg:flex-none">
<motion.span
className="flex max-w-full lg:max-w-none lg:flex-none"
client:load
{...getTitleAnimation(1.4)}
>
<Image
src={ComImage}
alt={community.images.community.alt}
class="rounded-3xl shadow-md lg:mx-auto dark:opacity-80"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
/>
</span>
</motion.span>
</section>
<script>
import { animate, onScroll, stagger } from 'animejs'
function initAnimations() {
const debug = false
const elements = document.querySelectorAll(
'#community h2 span, #community p, #community .community__button, #community img'
)
animate(elements, {
opacity: { from: 0.001, to: 1 },
translateY: { from: 20, to: 0 },
filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300,
delay: stagger(150),
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({
target: '#community',
debug,
}),
})
}
initAnimations()
</script>

View file

@ -1,5 +1,9 @@
---
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import { getLocale, getUI } from '~/utils/i18n'
import Description from './Description.astro'
import Video from './Video.astro'
const locale = getLocale(Astro)
@ -16,137 +20,290 @@ interface Props {
const { titles } = Astro.props
const featureList = [
{
key: 'workspaces',
title: features.featureTabs.workspaces.title,
description: features.featureTabs.workspaces.description,
video: 'workspaces',
},
{
key: 'compact-mode',
title: features.featureTabs.compactMode.title,
description: features.featureTabs.compactMode.description,
video: 'compact-mode',
},
{
key: 'glance',
title: features.featureTabs.glance.title,
description: features.featureTabs.glance.description,
video: 'glance',
},
{
key: 'split-view',
title: features.featureTabs.splitView.title,
description: features.featureTabs.splitView.description,
video: 'split-views',
},
]
const descriptions = Object.values(features.featureTabs).map(tab => tab.description)
---
<section
id="features"
class="relative flex w-full flex-col items-center gap-8 py-8 text-center sm:gap-12 sm:py-12 xl:gap-24 xl:py-36"
>
<!-- Section Header -->
<div class="flex w-full flex-col items-center gap-4 sm:gap-6">
<h2 class="text-3xl sm:text-4xl md:text-6xl">
{
(titles || features.titles).map(title => {
switch (title) {
case '\n':
return <br class="hidden md:block" />
default:
return (
<b
class="font-bold"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
{title}
</b>
)
}
})
}
</h2>
<p
class="max-w-4xl text-base sm:text-lg"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
<span class="opacity-80">{features.description}</span>
</p>
</div>
<!-- Features Layout -->
<div id="showcase" class="flex w-full flex-col gap-12 sm:gap-16 xl:gap-36">
<section id="Features" class="relative flex w-full flex-col py-12 text-start lg:py-36">
<Description class="mb-2 text-4xl font-bold sm:text-6xl">
{
featureList.map((feature, index) => (
<div class="flex w-full flex-col items-center gap-6 xl:gap-12">
<div class="flex flex-col items-center gap-4">
<h3 class="text-3xl font-bold opacity-0 blur-sm sm:text-4xl xl:text-5xl">
{feature.title}
</h3>
<p
class="max-w-3xl text-center text-base leading-relaxed sm:text-lg"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
<span class="opacity-80">{feature.description}</span>
</p>
</div>
(titles || features.titles).map((title, index) =>
title !== '\n' ? (
<motion.span client:load {...getTitleAnimation(0.2 + index * 0.2)}>
{title}
</motion.span>
) : (
<br class="hidden md:block" />
)
)
}
</Description>
<motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2">
{features.description}
</motion.p>
<div class="mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2">
<div class="flex w-full flex-col lg:w-1/3">
<!-- Mobile tabs -->
<div class="flex gap-2 overflow-x-auto overflow-y-clip lg:hidden">
<motion.button
client:load
{...getTitleAnimation()}
className="feature-tab whitespace-nowrap"
data-active="true"
>
{features.featureTabs.workspaces.title}
</motion.button>
<motion.button
client:load
{...getTitleAnimation(0.2)}
className="feature-tab whitespace-nowrap"
>
{features.featureTabs.compactMode.title}
</motion.button>
<motion.button
client:load
{...getTitleAnimation(0.4)}
className="feature-tab whitespace-nowrap"
>
{features.featureTabs.glance.title}
</motion.button>
<motion.button
client:load
{...getTitleAnimation(0.6)}
className="feature-tab whitespace-nowrap"
>
{features.featureTabs.splitView.title}
</motion.button>
</div>
<!-- Desktop features list -->
<div id="features-list" class="hidden lg:flex lg:flex-col lg:gap-3">
<motion.div client:load {...getTitleAnimation(0.8)} className="feature" data-active="true">
<Description class="text-2xl font-bold">
{features.featureTabs.workspaces.title}
</Description>
<Description>
{features.featureTabs.workspaces.description}
</Description>
</motion.div>
<motion.div client:load {...getTitleAnimation(1)} className="feature">
<Description class="text-2xl font-bold">
{features.featureTabs.compactMode.title}
</Description>
<Description>
{features.featureTabs.compactMode.description}
</Description>
</motion.div>
<motion.div client:load {...getTitleAnimation(1.2)} className="feature">
<Description class="text-2xl font-bold">
{features.featureTabs.glance.title}
</Description>
<Description>
{features.featureTabs.glance.description}
</Description>
</motion.div>
<motion.div client:load {...getTitleAnimation(1.4)} className="feature">
<Description class="text-2xl font-bold">
{features.featureTabs.splitView.title}
</Description>
<Description>
{features.featureTabs.splitView.description}
</Description>
</motion.div>
</div>
<!-- Mobile description -->
<div class="feature-description mt-4 lg:hidden" data-descriptions={descriptions.join('|||')}>
</div>
</div>
<div class="sticky top-6 h-fit w-full lg:w-3/5">
<div class="relative w-full">
<div class="video-stack relative h-full w-full">
<Video
class="w-full rounded-xl object-cover shadow-lg"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
name={feature.video}
autoplay
loop
muted
playsinline
preload="none"
class="feature-video"
name="workspaces"
/>
<Video
autoplay
loop
muted
playsinline
preload="none"
class="feature-video"
name="compact-mode"
/>
<Video
autoplay
loop
muted
playsinline
preload="none"
class="feature-video"
name="glance"
/>
<Video
autoplay
loop
muted
playsinline
preload="none"
class="feature-video"
name="split-views"
/>
</div>
))
}
</div>
</div>
</div>
</section>
<script>
import { animate, onScroll, stagger } from 'animejs'
const features = document.querySelectorAll('.feature, .feature-tab') as NodeListOf<HTMLElement>
function initAnimations() {
const debug = false
// Set initial description
const descriptionEl = document.querySelector('.feature-description') as HTMLDivElement
const descriptions = descriptionEl?.dataset.descriptions?.split('|||')
if (descriptionEl && descriptions) {
descriptionEl.textContent = descriptions[0]
}
const elements = document.querySelectorAll('#features h2 b, #features > div > p')
const showcase = document.getElementById('showcase') as HTMLElement
function changeToFeature({ target }: MouseEvent | { target: HTMLElement }) {
let targetEl: HTMLElement | null = target as HTMLElement
animate(elements, {
opacity: { from: 0.001, to: 1 },
translateY: { from: 20, to: 0 },
filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300,
delay: stagger(150),
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({
target: '#features',
debug,
}),
})
if (target instanceof HTMLElement) {
targetEl = target.closest('.feature, .feature-tab')
}
for (const element of showcase.children) {
const target = element.querySelectorAll('p, h3, video')
animate(target, {
opacity: { from: 0.001, to: 1 },
translateY: { from: 20, to: 0 },
filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300,
delay: stagger(150),
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({
enter: { container: 'top+=500' },
target: element,
debug,
}),
})
if (!targetEl) {
return
}
const index = Array.from(features).indexOf(targetEl) % 4
if (index === -1) {
return
}
// Update both mobile and desktop elements
for (let i = 0; i < features.length; i += 1) {
const f = features[i]
if (i % 4 === index) {
f.setAttribute('data-active', 'true')
} else {
f.removeAttribute('data-active')
}
}
// Update mobile description
const descriptionEl = document.querySelector('.feature-description')
if (descriptionEl && descriptions) {
descriptionEl.textContent = descriptions[index]
}
const videos = document.querySelectorAll<HTMLVideoElement>('.feature-video')
for (let i = 0; i < videos.length; i += 1) {
const vid = videos[i]
const yOffset = (i - index) * 20
const zOffset = i === index ? 0 : -100 - Math.abs(i - index) * 50
const scale = i === index ? 1 : 0.95
const rotation = (i - index) * 3
if (i === index) {
vid.setAttribute('data-active', 'true')
vid.style.opacity = '1'
vid.style.transform = `translate3d(-50%, 0, 0) scale(${scale})`
vid.style.zIndex = '10'
vid.currentTime = 0
vid.play()
} else {
vid.removeAttribute('data-active')
vid.style.transform = `translate3d(-50%, ${yOffset}px, ${zOffset}px)
rotate3d(1, 0, 0, ${rotation}deg)
scale(${scale})`
vid.style.zIndex = String(1 - Math.abs(i - index))
vid.pause()
}
}
}
initAnimations()
for (const feature of features) {
feature.addEventListener('click', changeToFeature)
}
changeToFeature({ target: features[0] })
</script>
<style>
.feature {
@apply w-full cursor-pointer select-none rounded-lg p-4 opacity-0 hover:bg-subtle;
transition: background 0.2s ease-in-out;
&[data-active='true'] {
@apply bg-subtle;
}
}
.feature-tab {
@apply rounded-lg px-4 py-2 text-lg font-medium opacity-0 hover:bg-subtle;
transition: background 0.2s ease-in-out;
&[data-active='true'] {
@apply bg-subtle;
}
}
.feature-description {
@apply px-4 text-sm;
}
.video-stack {
@apply aspect-video;
perspective: 2000px;
transform-style: preserve-3d;
}
.feature-video {
@apply left-1/2 hidden transform rounded-3xl shadow-md lg:absolute lg:mx-auto lg:block lg:w-full dark:opacity-80;
max-width: 800px;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
top: 0;
transform-origin: top center;
backface-visibility: hidden;
will-change: transform, opacity;
transform: translate3d(-50%, 0, -100px) scale(0.95);
}
/* Don't animate translation on small screens */
@media (max-width: 1024px) {
.feature-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: none !important;
display: none;
object-fit: cover;
&[data-active='true'] {
display: block;
opacity: 1;
}
}
.video-stack {
@apply overflow-hidden rounded-xl;
position: relative;
width: 100%;
aspect-ratio: 16/9;
}
}
</style>

View file

@ -1,11 +1,24 @@
---
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import Title from '~/components/Title.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import SocialMediaStrip from './SocialMediaStrip.astro'
import Video from './Video.astro'
let titleAnimationCounter = 0
function getNewAnimationDelay() {
titleAnimationCounter++
return titleAnimationCounter * 0.15
}
function getHeroTitleAnimation() {
return getTitleAnimation(getNewAnimationDelay())
}
const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
@ -19,54 +32,58 @@ const {
<header
id="header"
class="flex w-full flex-col items-center gap-6 py-16 text-center lg:gap-12 lg:py-32"
class="flex w-full flex-col items-center gap-[20%] py-32 text-center lg:gap-[25%]"
>
<div class="flex h-full flex-col items-center justify-center gap-6 md:gap-8">
<div class="flex flex-col items-center justify-center gap-4 md:gap-8">
<div>
<Title class="relative px-12 text-center text-5xl md:text-7xl lg:px-0 lg:text-9xl">
{
hero.title.map(title =>
title.text !== '\n' ? (
<b
class:list={['font-normal', title.highlight && 'italic text-coral']}
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
{title.text}
</b>
) : (
<br class="hidden md:block" />
)
)
}
</Title>
<p
class="px-12 text-center lg:px-0"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
{hero.description[0]}
<br class="hidden sm:inline" />
{hero.description[1]}
</p>
</div>
<div
class="flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row"
<div class="flex h-full flex-col items-center justify-center">
<Title class="relative px-12 text-center font-normal md:text-7xl lg:px-0 lg:text-9xl">
{
hero.title.map(title =>
title.text !== '\n' ? (
<motion.span
client:load
{...getHeroTitleAnimation()}
className={title.highlight ? 'italic text-coral' : ''}
>
{title.text}
</motion.span>
) : (
<br class="hidden md:block" />
)
)
}
</Title>
<motion.span client:load {...getHeroTitleAnimation()}>
<Description class="px-12 text-center lg:px-0">
{hero.description[0]}
<br class="hidden sm:inline" />
{hero.description[1]}</Description
>
<div style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
<Button class="w-fit" href={getLocalePath('/download')} isPrimary>
{hero.buttons.beta}
<ArrowRightIcon class="size-4" />
</Button>
</div>
<div style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
<Button class="w-fit" href={getLocalePath('/donate')}>
{hero.buttons.support}
</Button>
</div>
</div>
</motion.span>
<div class="mt-6 flex w-2/3 flex-col gap-3 sm:gap-6 md:w-fit md:flex-row">
<motion.span client:load {...getHeroTitleAnimation()}>
<Button class="w-full" href={getLocalePath('/download')} isPrimary>
{hero.buttons.beta}
<ArrowRightIcon class="size-4" />
</Button>
</motion.span>
<motion.span client:load {...getHeroTitleAnimation()}>
<Button href={getLocalePath('/donate')}>{hero.buttons.support}</Button>
</motion.span>
</div>
<SocialMediaStrip style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)" />
<motion.span
client:load
{...getHeroTitleAnimation()}
className="mx-auto translate-y-16 !transform"
>
<SocialMediaStrip />
</motion.span>
</div>
</header>
<motion.span
className="flex max-w-full lg:max-w-none lg:flex-none"
client:load
{...getHeroTitleAnimation()}
>
<Video
name="hero-video"
autoplay
@ -74,39 +91,6 @@ const {
muted
playsinline
preload="none"
class="rounded-xl"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px); transform-origin: top;"
class="mb-24 rounded-3xl shadow-md dark:opacity-80"
/>
</header>
<script>
import { animate, onScroll, stagger } from 'animejs'
function initAnimations() {
const debug = false
const elements = document.querySelectorAll(
'#header h1 b, #header p, #header div:has(a), #header video, #header ul'
)
animate(elements, {
// @ts-expect-error - element is HTMLElement
opacity: element => {
if (element.tagName === 'UL') {
return { from: 0.001, to: 0.8 }
}
return { from: 0.001, to: 1 }
},
translateY: { from: 20, to: 0 },
filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300,
delay: stagger(150),
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({
target: '#header',
debug,
}),
})
}
initAnimations()
</script>
</motion.span>

View file

@ -1,5 +1,5 @@
---
const { class: className, ...props } = Astro.props
const { gap = 4 } = Astro.props
import { icon, library } from '@fortawesome/fontawesome-svg-core'
import {
@ -9,7 +9,6 @@ import {
faReddit,
faXTwitter,
} from '@fortawesome/free-brands-svg-icons'
import { cn } from '~/utils/merge'
library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit)
const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
@ -19,7 +18,7 @@ const XTwitter = icon({ prefix: 'fab', iconName: 'x-twitter' })
const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
---
<ul class={cn('flex items-center gap-4 opacity-80', className)} {...props}>
<ul class={`flex items-center opacity-80 gap-${gap}`}>
<li>
<a
href="https://github.com/zen-browser"

View file

@ -1,5 +1,7 @@
---
import h3 from '~/components/Description.astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import Description from '~/components/Description.astro'
import { getLocale, getUI } from '~/utils/i18n'
const locale = getLocale(Astro)
@ -17,55 +19,23 @@ const {
---
<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
<div class="flex flex-col items-center gap-6 text-center">
<h3
class="text-4xl font-bold sm:text-6xl"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
{sponsors.title}
</h3>
<p class="text-base" style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
<span class="opacity-80" set:html={sponsors.description} />
</p>
<div class="sponsors__sponsor relative mt-8 flex items-center justify-center">
<a
href={sponsors.sponsors['tuta'].url}
target="_blank"
class="w-fit"
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
>
<Image
src={tutaLogo}
alt={sponsors.sponsors['tuta'].name}
class="h-16 w-fit object-contain"
/>
</a>
<div class="mx-auto flex flex-col text-center">
<motion.span client:load {...getTitleAnimation(0.2)}>
<Description class="mb-2 text-4xl font-bold sm:text-6xl">{sponsors.title}</Description>
</motion.span>
<motion.span client:load {...getTitleAnimation(0.4)}>
<Description set:html={sponsors.description} />
</motion.span>
<div class="relative mt-8 flex items-center justify-center">
<motion.span client:load {...getTitleAnimation(0.6)}>
<a href={sponsors.sponsors['tuta'].url} target="_blank" class="w-fit">
<Image
src={tutaLogo}
alt={sponsors.sponsors['tuta'].name}
class="h-16 w-fit object-contain"
/>
</a>
</motion.span>
</div>
</div>
</section>
<script>
import { animate, onScroll, stagger } from 'animejs'
function initAnimations() {
const debug = false
const elements = document.querySelectorAll(
'#sponsors h3, #sponsors p, #sponsors .sponsors__sponsor a'
)
animate(elements, {
opacity: { from: 0.001, to: 1 },
translateY: { from: 20, to: 0 },
filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300,
delay: stagger(150),
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({
target: '#sponsors',
debug,
}),
})
}
initAnimations()
</script>