blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-StackCards/Component.tsx

@@ -194,8 +194,11 @@ export function DDStackCards(props: DDStackCardsProps) {
     const timer = window.setTimeout(() => {
       const wrapper = wrapperRef.current
       const cardEls = cardRefs.current.filter(Boolean) as HTMLDivElement[]
+      const surfaceEls = cardEls
+        .map((card) => card.querySelector<HTMLElement>('.stack-card-surface'))
+        .filter(Boolean) as HTMLElement[]
 
-      if (!wrapper || !cardEls.length) return
+      if (!wrapper || !cardEls.length || surfaceEls.length !== cardEls.length) return
 
       const ctx = gsap.context(() => {
         gsap.set(wrapper, {
@@ -203,12 +206,12 @@ export function DDStackCards(props: DDStackCardsProps) {
           willChange: 'opacity',
         })
 
-        gsap.set(cardEls, {
+        gsap.set(surfaceEls, {
           transformPerspective: 1200,
           transformOrigin: 'top center',
         })
 
-        cardEls.forEach((card, i) => {
+        cardEls.forEach((_card, i) => {
           for (let j = i + 1; j < cardEls.length; j++) {
             const step = j - i
             const prevStep = step - 1
@@ -216,7 +219,7 @@ export function DDStackCards(props: DDStackCardsProps) {
               layoutValues.initialStickyTop + (j - 1) * layoutValues.cardOffset
 
             gsap.fromTo(
-              card,
+              surfaceEls[i],
               {
                 scale: 1 - prevStep * layoutValues.scaleStep,
                 z: -prevStep * layoutValues.depthZ,
@@ -225,7 +228,6 @@ export function DDStackCards(props: DDStackCardsProps) {
                 scale: 1 - step * layoutValues.scaleStep,
                 z: -step * layoutValues.depthZ,
                 force3D: true,
-                filter: `brightness(${Math.max(0.65, 1 - step * 0.06)})`,
                 borderRadius: '20px',
                 immediateRender: false,
                 scrollTrigger: {
@@ -277,197 +279,196 @@ export function DDStackCards(props: DDStackCardsProps) {
   const totalCards = cards.length
 
   return (
-    <section
-      ref={wrapperRef}
-      className="stack-cards-block relative w-full invert-[0.95] brightness-110 contrast-125 dark:brightness-100 dark:contrast-100 dark:invert-[0]"
-    >
-      {cards.map((card, i) => {
-        const accent = ACCENTS[card.accentVariant ?? 'lime']
-        const cardMedia =
-          card.image && typeof card.image === 'object' ? (card.image as Media) : null
-
-        return (
-          <section
-            key={card.id ?? i}
-            id={i === 0 ? (sectionId ?? undefined) : undefined}
-            ref={(el) => {
-              cardRefs.current[i] = el
-            }}
-            className="stack-card renderblock-container sticky! w-full overflow-hidden px-4 py-16 sm:px-6 lg:py-32"
-            style={{
-              top: `${layoutValues.initialStickyTop + i * layoutValues.cardOffset}px`,
-              zIndex: i + 1,
-              willChange: 'transform',
-            }}
-          >
-            {i === 0 ? '#BlockName-DDStackCards' : null}
-            <div
-              className="relative mx-auto w-full max-w-5xl overflow-hidden rounded-2xl"
+    <>
+      <style>{'body:has(.stack-cards-block) { overflow-x: clip; }'}</style>
+      <section ref={wrapperRef} className="stack-cards-block relative w-full">
+        {cards.map((card, i) => {
+          const accent = ACCENTS[card.accentVariant ?? 'lime']
+          const cardMedia =
+            card.image && typeof card.image === 'object' ? (card.image as Media) : null
+
+          return (
+            <section
+              key={card.id ?? i}
+              id={i === 0 ? (sectionId ?? undefined) : undefined}
+              ref={(el) => {
+                cardRefs.current[i] = el
+              }}
+              className="stack-card renderblock-container sticky w-full overflow-hidden px-4 py-16 sm:px-6 lg:py-32"
               style={{
-                background: 'rgb(8 8 10 / 90%)',
-                border: '1px solid rgba(255,255,255,0.07)',
-                backdropFilter: 'blur(8px)',
+                top: `${layoutValues.initialStickyTop + i * layoutValues.cardOffset}px`,
+                zIndex: i + 1,
               }}
             >
+              {i === 0 ? '' : null}
               <div
-                className="absolute left-0 right-0 top-0 h-px"
+                className="stack-card-surface relative mx-auto w-full max-w-5xl overflow-hidden rounded-2xl invert-[0.95] brightness-110 contrast-125 dark:brightness-100 dark:contrast-100 dark:invert-[0]"
                 style={{
-                  background: `linear-gradient(90deg, transparent, rgba(${accent.rgb},0.5), transparent)`,
+                  background: 'rgb(8 8 10 / 90%)',
+                  border: '1px solid rgba(255,255,255,0.07)',
+                  backdropFilter: 'blur(8px)',
                 }}
-              />
-
-              <div className="grid min-h-70 grid-cols-[1fr_5.5rem] sm:grid-cols-[1fr_8rem] md:min-h-85 md:grid-cols-[1fr_auto]">
-                <div className="stackcard-bg flex flex-col justify-between p-6 md:p-10 lg:p-14">
-                  <div>
-                    <div className="mb-6 flex items-start justify-between md:mb-8">
-                      <div className="flex items-center gap-3 md:gap-4">
-                        <div
-                          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl md:h-12 md:w-12"
-                          style={{
-                            background: `rgba(${accent.rgb},0.1)`,
-                            border: `1px solid rgba(${accent.rgb},0.25)`,
-                          }}
-                        >
-                          <span style={{ color: accent.hex }}>
-                            <DynamicIcon className="shrink-0" name={card.iconName} size={20} />
-                          </span>
+              >
+                <div
+                  className="absolute left-0 right-0 top-0 h-px"
+                  style={{
+                    background: `linear-gradient(90deg, transparent, rgba(${accent.rgb},0.5), transparent)`,
+                  }}
+                />
+
+                <div className="grid min-h-70 grid-cols-[1fr_5.5rem] sm:grid-cols-[1fr_8rem] md:min-h-85 md:grid-cols-[1fr_auto]">
+                  <div className="stackcard-bg flex flex-col justify-between p-6 md:p-10 lg:p-14">
+                    <div>
+                      <div className="mb-6 flex items-start justify-between md:mb-8">
+                        <div className="flex items-center gap-3 md:gap-4">
+                          <div
+                            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl md:h-12 md:w-12"
+                            style={{
+                              background: `rgba(${accent.rgb},0.1)`,
+                              border: `1px solid rgba(${accent.rgb},0.25)`,
+                            }}
+                          >
+                            <span style={{ color: accent.hex }}>
+                              <DynamicIcon className="shrink-0" name={card.iconName} size={20} />
+                            </span>
+                          </div>
+
+                          <div>
+                            {card.number && (
+                              <div
+                                className="mb-0.5 text-xs font-black uppercase tracking-widest md:text-xs"
+                                style={{ color: `rgba(${accent.rgb},0.6)` }}
+                              >
+                                {card.number} / {String(totalCards).padStart(2, '0')}
+                              </div>
+                            )}
+
+                            {card.title && (
+                              <h3 className="text-xl font-extrabold tracking-tight text-stone-50/80 md:text-2xl lg:text-3xl">
+                                {card.title}
+                              </h3>
+                            )}
+                          </div>
                         </div>
 
-                        <div>
-                          {card.number && (
-                            <div
-                              className="mb-0.5 text-xs font-black uppercase tracking-widest md:text-xs"
-                              style={{ color: `rgba(${accent.rgb},0.6)` }}
-                            >
-                              {card.number} / {String(totalCards).padStart(2, '0')}
-                            </div>
-                          )}
-
-                          {card.title && (
-                            <h3 className="text-xl font-extrabold tracking-tight text-stone-50/80 md:text-2xl lg:text-3xl">
-                              {card.title}
-                            </h3>
-                          )}
-                        </div>
+                        {(card.statValue || card.statLabel) && (
+                          <div className="hidden flex-col items-end md:flex">
+                            {card.statValue && (
+                              <span
+                                className="text-4xl font-black leading-none"
+                                style={{ color: accent.hex }}
+                              >
+                                {card.statValue}
+                              </span>
+                            )}
+
+                            {card.statLabel && (
+                              <span
+                                className="mt-1 text-xs"
+                                style={{ color: 'rgba(255,255,255,0.3)' }}
+                              >
+                                {card.statLabel}
+                              </span>
+                            )}
+                          </div>
+                        )}
                       </div>
 
-                      {(card.statValue || card.statLabel) && (
-                        <div className="hidden flex-col items-end md:flex">
-                          {card.statValue && (
-                            <span
-                              className="text-4xl font-black leading-none"
-                              style={{ color: accent.hex }}
-                            >
-                              {card.statValue}
-                            </span>
-                          )}
+                      {card.content ? (
+                        <RichText
+                          data={card.content as any}
+                          enableProse={false}
+                          enableGutter={false}
+                          className="max-w-xl text-sm leading-relaxed text-stone-800 dark:text-stone-200 md:text-base"
+                          style={{ color: 'rgba(255,255,255,0.45)' }}
+                        />
+                      ) : null}
+                    </div>
 
-                          {card.statLabel && (
+                    <div className="mt-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center md:mt-8">
+                      {card.tags && card.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-2">
+                          {card.tags.map((tagItem, ti) => (
                             <span
-                              className="mt-1 text-xs"
-                              style={{ color: 'rgba(255,255,255,0.3)' }}
+                              key={tagItem.id ?? ti}
+                              className="rounded-full px-3 py-1 text-xs font-semibold"
+                              style={{
+                                background: `rgba(${accent.rgb},0.07)`,
+                                border: `1px solid rgba(${accent.rgb},0.18)`,
+                                color: accent.hex,
+                              }}
                             >
-                              {card.statLabel}
+                              {tagItem.tag}
                             </span>
-                          )}
+                          ))}
                         </div>
                       )}
-                    </div>
 
-                    {card.content ? (
-                      <RichText
-                        data={card.content as any}
-                        enableProse={false}
-                        enableGutter={false}
-                        className="max-w-xl text-sm leading-relaxed text-stone-200 dark:text-stone-200 md:text-base"
-                        style={{ color: 'rgba(255,255,255,0.45)' }}
-                      />
-                    ) : null}
-                  </div>
-
-                  <div className="mt-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center md:mt-8">
-                    {card.tags && card.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-2">
-                        {card.tags.map((tagItem, ti) => (
-                          <span
-                            key={tagItem.id ?? ti}
-                            className="rounded-full px-3 py-1 text-xs font-semibold"
-                            style={{
-                              background: `rgba(${accent.rgb},0.07)`,
-                              border: `1px solid rgba(${accent.rgb},0.18)`,
-                              color: accent.hex,
-                            }}
-                          >
-                            {tagItem.tag}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-
-                    {card.ctaLabel && (
-                      <a
-                        href={card.ctaHref ?? '#'}
-                        className="group flex cursor-pointer items-center gap-2 whitespace-nowrap text-xs font-black uppercase tracking-widest"
-                        style={{ color: accent.hex }}
-                      >
-                        {card.ctaLabel}
-                        <ArrowRight
-                          size={14}
-                          className="transition-transform group-hover:translate-x-1"
+                      {card.ctaLabel && (
+                        <a
+                          href={card.ctaHref ?? '#'}
+                          className="group flex cursor-pointer items-center gap-2 whitespace-nowrap text-xs font-black uppercase tracking-widest"
                           style={{ color: accent.hex }}
-                        />
-                      </a>
-                    )}
+                        >
+                          {card.ctaLabel}
+                          <ArrowRight
+                            size={14}
+                            className="transition-transform group-hover:translate-x-1"
+                            style={{ color: accent.hex }}
+                          />
+                        </a>
+                      )}
+                    </div>
                   </div>
-                </div>
 
-                <div
-                  className="relative flex w-22 items-center justify-center overflow-hidden sm:w-32 md:w-48 lg:w-64 xl:w-80"
-                  style={{
-                    borderLeft: `1px solid rgba(${accent.rgb},0.08)`,
-                    background: `linear-gradient(135deg, rgba(${accent.rgb},0.04) 0%, transparent 100%)`,
-                  }}
-                >
                   <div
-                    className="absolute inset-0"
+                    className="relative flex w-22 items-center justify-center overflow-hidden sm:w-32 md:w-48 lg:w-64 xl:w-80"
                     style={{
-                      background: `radial-gradient(ellipse at 50% 50%, rgba(${accent.rgb},0.25) 0%, transparent 70%)`,
+                      borderLeft: `1px solid rgba(${accent.rgb},0.08)`,
+                      background: `linear-gradient(135deg, rgba(${accent.rgb},0.04) 0%, transparent 100%)`,
                     }}
-                  />
-
-                  {isLocalImageSrc(cardMedia?.url) ? (
-                    <Image
-                      src={cardMedia.url}
-                      alt={cardMedia.alt ?? card.title ?? ''}
-                      fill
-                      className="relative z-10 object-cover opacity-80"
-                      sizes="(max-width: 640px) 88px, (max-width: 768px) 128px, (max-width: 1280px) 192px, 320px"
+                  >
+                    <div
+                      className="absolute inset-0"
+                      style={{
+                        background: `radial-gradient(ellipse at 50% 50%, rgba(${accent.rgb},0.25) 0%, transparent 70%)`,
+                      }}
                     />
-                  ) : (
-                    <>
-                      <span className="relative z-10" style={{ color: `rgba(${accent.rgb},1)` }}>
-                        <DynamicIcon className="shrink-0" name={card.iconName} size={96} />
-                      </span>
-
-                      {card.number && (
-                        <div
-                          className="absolute bottom-4 right-6 select-none font-black leading-none"
-                          style={{
-                            fontSize: '80px',
-                            color: `rgba(${accent.rgb},0.2)`,
-                          }}
-                        >
-                          {card.number}
-                        </div>
-                      )}
-                    </>
-                  )}
+
+                    {isLocalImageSrc(cardMedia?.url) ? (
+                      <Image
+                        src={cardMedia.url}
+                        alt={cardMedia.alt ?? card.title ?? ''}
+                        fill
+                        className="relative z-10 object-cover opacity-80 invert dark:invert-0"
+                        sizes="(max-width: 640px) 88px, (max-width: 768px) 128px, (max-width: 1280px) 192px, 320px"
+                      />
+                    ) : (
+                      <>
+                        <span className="relative z-10" style={{ color: `rgba(${accent.rgb},1)` }}>
+                          <DynamicIcon className="shrink-0" name={card.iconName} size={96} />
+                        </span>
+
+                        {card.number && (
+                          <div
+                            className="absolute bottom-4 right-6 select-none font-black leading-none"
+                            style={{
+                              fontSize: '80px',
+                              color: `rgba(${accent.rgb},0.2)`,
+                            }}
+                          >
+                            {card.number}
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          </section>
-        )
-      })}
-    </section>
+            </section>
+          )
+        })}
+      </section>
+    </>
   )
 }