mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
fix(features): attempt to improve feature section to reduce performance issues
This commit is contained in:
taroj1205
parent
95201bb0f6
commit
1391a517b9
1 changed files with 41 additions and 265 deletions
|
|
@ -2,6 +2,7 @@
|
|||
import { motion } from 'motion/react'
|
||||
import { getTitleAnimation } from '~/animations'
|
||||
import Description from '~/components/Description.astro'
|
||||
import Video from './Video.astro'
|
||||
|
||||
import CompactModeVideo from '~/assets/CompactMode.webm'
|
||||
import GlanceVideo from '~/assets/Glance.webm'
|
||||
|
|
@ -9,7 +10,6 @@ import SplitViewsVideo from '~/assets/SplitViews.webm'
|
|||
import WorkspacesVideo from '~/assets/Workspaces.webm'
|
||||
|
||||
import { getLocale, getUI } from '~/utils/i18n'
|
||||
import Video from './Video.astro'
|
||||
|
||||
const locale = getLocale(Astro)
|
||||
|
||||
|
|
@ -21,12 +21,32 @@ const {
|
|||
|
||||
const { title1 = features.title1, title2 = features.title2, title3 = features.title3 } = Astro.props
|
||||
|
||||
const descriptions = Object.values(features.featureTabs).map((tab) => tab.description)
|
||||
const featureList = [
|
||||
{
|
||||
key: 'workspaces',
|
||||
video: WorkspacesVideo,
|
||||
...features.featureTabs.workspaces,
|
||||
},
|
||||
{
|
||||
key: 'compactMode',
|
||||
video: CompactModeVideo,
|
||||
...features.featureTabs.compactMode,
|
||||
},
|
||||
{
|
||||
key: 'glance',
|
||||
video: GlanceVideo,
|
||||
...features.featureTabs.glance,
|
||||
},
|
||||
{
|
||||
key: 'splitView',
|
||||
video: SplitViewsVideo,
|
||||
...features.featureTabs.splitView,
|
||||
},
|
||||
]
|
||||
---
|
||||
|
||||
<section
|
||||
id="Features"
|
||||
class="relative flex w-full flex-col py-12 text-start lg:py-36"
|
||||
class="relative flex w-full flex-col items-center gap-12 py-12 text-start md:text-center lg:py-36"
|
||||
>
|
||||
<Description class="mb-2 text-4xl sm:text-6xl font-bold">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
|
|
@ -39,277 +59,33 @@ const descriptions = Object.values(features.featureTabs).map((tab) => tab.descri
|
|||
{title3}
|
||||
</motion.span>
|
||||
</Description>
|
||||
<motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2">
|
||||
<motion.p client:load {...getTitleAnimation(0.6)} className="flex items-center justify-center max-w-2xl text-lg opacity-80">
|
||||
{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()}
|
||||
class="feature-tab whitespace-nowrap"
|
||||
data-active="true"
|
||||
>
|
||||
{features.featureTabs.workspaces.title}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
client:load
|
||||
{...getTitleAnimation(0.2)}
|
||||
class="feature-tab whitespace-nowrap"
|
||||
>
|
||||
{features.featureTabs.compactMode.title}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
client:load
|
||||
{...getTitleAnimation(0.4)}
|
||||
class="feature-tab whitespace-nowrap"
|
||||
>
|
||||
{features.featureTabs.glance.title}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
client:load
|
||||
{...getTitleAnimation(0.6)}
|
||||
class="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}
|
||||
<div class="flex w-full flex-col items-center justify-center gap-12">
|
||||
{featureList.map((feature, i) => (
|
||||
<motion.div
|
||||
client:load
|
||||
{...getTitleAnimation(0.8 + i * 0.2)}
|
||||
className="w-full flex flex-col items-center justify-center gap-4"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky top-6 w-full lg:w-3/5 h-fit">
|
||||
<div class="relative w-full">
|
||||
<div class="video-stack relative h-full w-full">
|
||||
<Description class="text-2xl font-bold text-center">
|
||||
{feature.title}
|
||||
</Description>
|
||||
<Description class="flex items-center justify-center max-w-xl text-center">
|
||||
{feature.description}
|
||||
</Description>
|
||||
<Video
|
||||
src={feature.video}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="feature-video"
|
||||
src={WorkspacesVideo}
|
||||
data-active="true"
|
||||
class="w-full rounded-3xl max-w-3xl shadow-md dark:opacity-80"
|
||||
/>
|
||||
<Video
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="feature-video"
|
||||
src={CompactModeVideo}
|
||||
/>
|
||||
<Video
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="feature-video"
|
||||
src={GlanceVideo}
|
||||
/>
|
||||
<Video
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="feature-video"
|
||||
src={SplitViewsVideo}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const features = document.querySelectorAll(
|
||||
'.feature, .feature-tab',
|
||||
) as NodeListOf<HTMLElement>
|
||||
|
||||
// Set initial description
|
||||
const descriptionEl = document.querySelector(
|
||||
'.feature-description',
|
||||
) as HTMLDivElement
|
||||
const descriptions = descriptionEl?.dataset.descriptions?.split(',')
|
||||
if (descriptionEl && descriptions) {
|
||||
descriptionEl.textContent = descriptions[0]
|
||||
}
|
||||
|
||||
function changeToFeature({
|
||||
target,
|
||||
}: {
|
||||
target: HTMLElement | undefined | null
|
||||
}) {
|
||||
target = target?.closest('.feature, .feature-tab')
|
||||
if (!target) return
|
||||
|
||||
const index = Array.from(features).indexOf(target) % 4
|
||||
if (index === -1) return
|
||||
|
||||
// Update both mobile and desktop elements
|
||||
features.forEach((f, 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(
|
||||
'.feature-video',
|
||||
) as NodeListOf<HTMLVideoElement>
|
||||
videos.forEach((vid, 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()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
for (const feature of features) {
|
||||
feature.addEventListener('click', changeToFeature as any)
|
||||
}
|
||||
|
||||
changeToFeature({ target: features[0] as any })
|
||||
</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 text-gray-600 dark:text-gray-300;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Dont 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue