abstraction, pages, info

Author: aryan-cs

src/components/InfoCard.css

@@ -0,0 +1,63 @@
+.info-card-screen {
+  min-height: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(1rem, 3vw, 2rem);
+  background: transparent;
+  overflow: hidden;
+}
+
+.info-card-shell {
+  --info-card-max-height: calc((100vh - var(--screen-closed-height)) * 0.75);
+  --info-card-deal-tilt: 0deg;
+  --info-card-rest-tilt-scale: 0.56;
+  --info-card-entry-tilt-scale: 1.85;
+  --info-card-mid-tilt-scale: 0.45;
+  width: min(calc(var(--info-card-max-height) * 1.3333333), calc(100vw - 2.5rem));
+  height: min(var(--info-card-max-height), calc((100vw - 2.5rem) * 0.75));
+  aspect-ratio: 4 / 3;
+  border: var(--frame-strong);
+  background: var(--surface);
+  box-shadow: var(--underlay-shadow);
+  border-radius: 0.5rem;
+  padding: var(--info-card-padding, clamp(1.3rem, 3.2vw, 2.25rem));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--info-card-gap, clamp(0.375rem, 0.825vw, 0.5rem));
+  text-align: center;
+  transform-origin: center 115%;
+  animation: info-card-deal-in 820ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
+  will-change: transform;
+}
+
+@media (min-width: 901px) {
+  .info-card-shell {
+    --info-card-rest-tilt-scale: 1;
+    --info-card-entry-tilt-scale: 3.4;
+    --info-card-mid-tilt-scale: 0.86;
+  }
+}
+
+@keyframes info-card-deal-in {
+  0% {
+    transform: translate3d(0, 120vh, 0) rotate(calc(var(--info-card-deal-tilt) * var(--info-card-entry-tilt-scale)));
+  }
+  72% {
+    transform: translate3d(0, -0.8rem, 0) rotate(calc(var(--info-card-deal-tilt) * var(--info-card-mid-tilt-scale)));
+  }
+  100% {
+    transform: translate3d(0, 0, 0) rotate(calc(var(--info-card-deal-tilt) * var(--info-card-rest-tilt-scale)));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .info-card-shell {
+    animation: none;
+    transform: rotate(calc(var(--info-card-deal-tilt) * var(--info-card-rest-tilt-scale)));
+    will-change: auto;
+  }
+}

src/components/InfoCard.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from "react";
+import "./InfoCard.css";
+
+const DEAL_TILT_MIN_DEG = 1.2;
+const DEAL_TILT_MAX_DEG = 3.4;
+const DEAL_TILT_MIN_DELTA_DEG = 0.45;
+const RECENT_TILT_WINDOW = 5;
+const recentTiltMagnitudes = [];
+
+function sampleTiltMagnitude() {
+  return DEAL_TILT_MIN_DEG + Math.random() * (DEAL_TILT_MAX_DEG - DEAL_TILT_MIN_DEG);
+}
+
+function generateCardTilt(dealIndex) {
+  const direction = Number.isFinite(dealIndex)
+    ? dealIndex % 2 === 0
+      ? -1
+      : 1
+    : Math.random() < 0.5
+      ? -1
+      : 1;
+  let magnitude = sampleTiltMagnitude();
+  let attempt = 0;
+
+  while (attempt < 12) {
+    const isTooCloseToRecent = recentTiltMagnitudes.some(
+      (recentMagnitude) => Math.abs(recentMagnitude - magnitude) < DEAL_TILT_MIN_DELTA_DEG
+    );
+    if (!isTooCloseToRecent) {
+      break;
+    }
+    magnitude = sampleTiltMagnitude();
+    attempt += 1;
+  }
+
+  recentTiltMagnitudes.push(magnitude);
+  if (recentTiltMagnitudes.length > RECENT_TILT_WINDOW) {
+    recentTiltMagnitudes.shift();
+  }
+
+  const tilt = magnitude * direction;
+  return tilt.toFixed(2);
+}
+
+function InfoCard({
+  screenClassName = "",
+  cardClassName = "",
+  role = "region",
+  ariaLabel,
+  dealIndex = null,
+  children,
+}) {
+  const screenClassNames = ["info-card-screen", screenClassName]
+    .filter(Boolean)
+    .join(" ");
+  const cardClassNames = ["info-card-shell", cardClassName]
+    .filter(Boolean)
+    .join(" ");
+  const cardTilt = useMemo(() => generateCardTilt(dealIndex), [dealIndex]);
+  const cardStyle = {
+    "--info-card-deal-tilt": `${cardTilt}deg`,
+  };
+
+  return (
+    <main className={screenClassNames} aria-live="polite">
+      <section className={cardClassNames} role={role} aria-label={ariaLabel} style={cardStyle}>
+        {children}
+      </section>
+    </main>
+  );
+}
+
+export default InfoCard;