diff --git a/apps/marketing-app/src/app/(app)/page.tsx b/apps/marketing-app/src/app/(app)/page.tsx index e709745..659a7b1 100644 --- a/apps/marketing-app/src/app/(app)/page.tsx +++ b/apps/marketing-app/src/app/(app)/page.tsx @@ -15,6 +15,7 @@ import { UseItYourWay } from "../components/use-it-your-way"; import { WaitlistDialog } from "../components/waitlist-dialog"; import { peopleSummary } from "./people-summary"; import { PersonSelect } from "./person-select"; +import { NotificationAnimation } from "../components/notification-animation"; export default async function Page(props: { searchParams: Promise<{ [key: string]: string | string[] | undefined }>; @@ -134,6 +135,11 @@ export default async function Page(props: {
+ + {/* Video animation demo */} +
+ +
([]); + const [isRunning, setIsRunning] = useState(false); + const [startTime, setStartTime] = useState(null); + + const getRandomNotification = (): Notification => { + const pool = NOTIFICATION_POOL.filter(n => + !notifications.some(existing => existing.title === n.title) + ); + const baseNotification = pool.length === 0 ? NOTIFICATION_POOL[0] : pool[Math.floor(Math.random() * pool.length)]; + + const timeAgo = Math.floor(Math.random() * 30) + 1; + + return { + ...baseNotification, + id: `${baseNotification.type}-${Date.now()}-${Math.random()}`, + time: `${timeAgo}m ago`, + visible: true, + x: Math.random() * 60 + 5, // 5% to 65% from left + y: Math.random() * 80 + 5, // 5% to 85% from top + }; + }; + + // Function to add a notification and schedule its removal + const addNotification = () => { + // Limit to 30 notifications for performance + if (notifications.length >= 30) { + return; + } + + const notification = getRandomNotification(); + setNotifications(prev => [...prev, notification]); + + // Remove notification after 4-8 seconds (variable lifetime for more organic feel) + const lifetime = Math.random() * 4000 + 4000; // 4-8 seconds + setTimeout(() => { + setNotifications(prev => prev.filter(n => n.id !== notification.id)); + }, lifetime); + }; + + // Function to add multiple notifications with staggered timing + const addMultipleNotifications = (count: number, delay: number = 50) => { + for (let i = 0; i < count && notifications.length + i < 30; i++) { + setTimeout(() => { + addNotification(); + }, i * delay); + } + }; + + // Calculate current speed based on elapsed time (gradual acceleration that continues indefinitely) + const getCurrentSpeed = (elapsedMs: number): { interval: number; burstSize: number; staggerDelay: number } => { + const elapsedSeconds = elapsedMs / 1000; + + // Continuous acceleration that levels off at maximum chaos + const maxSpeedSeconds = 30; // Reach max chaos at 30 seconds + const speedFactor = Math.min(elapsedSeconds / maxSpeedSeconds, 1); + const accelerationCurve = Math.pow(speedFactor, 1.5); // Smooth acceleration curve + + // Interval: starts at 2000ms, gradually reduces to 150ms for maximum chaos + const interval = 2000 - (1850 * accelerationCurve); + + // Burst size: starts at 1, gradually increases to 6 (considering our 30 limit) + const burstSize = Math.ceil(1 + (5 * accelerationCurve)); + + // Stagger delay: starts at 100ms, reduces to 5ms + const staggerDelay = 100 - (95 * accelerationCurve); + + return { interval, burstSize, staggerDelay }; + }; + + // Start the gradual acceleration system + useEffect(() => { + if (isRunning) return; + + setIsRunning(true); + setStartTime(Date.now()); + + // Add first notification immediately + setTimeout(() => { + addNotification(); + }, 500); + }, []); + + // Continuous gradual acceleration system that never ends + useEffect(() => { + if (!isRunning || !startTime) return; + + const scheduleNextBurst = () => { + const elapsed = Date.now() - startTime; + const { interval, burstSize, staggerDelay } = getCurrentSpeed(elapsed); + + // Add some randomness to make it feel more organic + const randomizedBurstSize = Math.max(1, burstSize + Math.floor(Math.random() * 3) - 1); // ±1 variation + const randomizedStaggerDelay = staggerDelay + Math.random() * 20 - 10; // ±10ms variation + const randomizedInterval = interval + Math.random() * 200 - 100; // ±100ms variation + + // Add the burst of notifications (respecting our 30 limit) + const remainingSlots = 30 - notifications.length; + const actualBurstSize = Math.min(randomizedBurstSize, remainingSlots); + + if (actualBurstSize > 0) { + addMultipleNotifications(actualBurstSize, Math.max(5, randomizedStaggerDelay)); + } + + // Occasionally add extra bursts for chaos (more frequent as speed increases) + const speedFactor = Math.min(elapsed / 30000, 1); + if (Math.random() < 0.3 + (speedFactor * 0.4)) { // 30% to 70% chance + setTimeout(() => { + const extraSlots = 30 - notifications.length; + const extraSize = Math.min(Math.ceil(Math.random() * actualBurstSize * 0.8), extraSlots); + if (extraSize > 0) { + addMultipleNotifications(extraSize, Math.max(3, randomizedStaggerDelay * 0.5)); + } + }, Math.random() * randomizedInterval * 0.3); + } + + // Schedule next burst (never stop) + setTimeout(scheduleNextBurst, Math.max(100, randomizedInterval)); + }; + + // Start the acceleration loop after initial delay + setTimeout(scheduleNextBurst, 1000); + }, [isRunning, startTime]); + + + + const getServiceIcon = (type: string) => { + switch (type) { + case "slack": + return ( +
+ S +
+ ); + case "github": + return ( +
+ + + +
+ ); + case "jira": + return ( +
+ J +
+ ); + case "email": + return ( +
+ + + +
+ ); + case "calendar": + return ( +
+ C +
+ ); + case "figma": + return ( +
+ F +
+ ); + case "discord": + return ( +
+ D +
+ ); + case "zoom": + return ( +
+ Z +
+ ); + case "linear": + return ( +
+ L +
+ ); + case "notion": + return ( +
+ N +
+ ); + case "twitter": + return ( +
+ T +
+ ); + case "linkedin": + return ( +
+ L +
+ ); + case "whatsapp": + return ( +
+ W +
+ ); + case "telegram": + return ( +
+ T +
+ ); + case "teams": + return ( +
+ T +
+ ); + case "asana": + return ( +
+ A +
+ ); + case "trello": + return ( +
+ T +
+ ); + case "spotify": + return ( +
+ S +
+ ); + case "youtube": + return ( +
+ Y +
+ ); + case "drive": + return ( +
+ D +
+ ); + case "dropbox": + return ( +
+ D +
+ ); + case "salesforce": + return ( +
+ S +
+ ); + case "intercom": + return ( +
+ I +
+ ); + case "hubspot": + return ( +
+ H +
+ ); + case "stripe": + return ( +
+ S +
+ ); + case "shopify": + return ( +
+ S +
+ ); + case "airtable": + return ( +
+ A +
+ ); + case "clickup": + return ( +
+ C +
+ ); + case "monday": + return ( +
+ M +
+ ); + case "phone": + return ( +
+ P +
+ ); + case "sms": + return ( +
+ S +
+ ); + default: + return ( +
+ • +
+ ); + } + }; + + const getNotificationStyle = (notification: Notification) => { + return "bg-white border-gray-200 text-gray-900 shadow-lg"; + }; + + return ( +
+

+ Old way: Scattered notifications flood your attention +

+ +
+ + + {notifications.map((notification, index) => { + // Add dramatic shaking effect to some notifications based on chaos level + const elapsedSeconds = startTime ? (Date.now() - startTime) / 1000 : 0; + const chaosLevel = Math.min(elapsedSeconds / 30, 1); // 0 to 1 over 30 seconds + const shouldShake = Math.random() < chaosLevel * 0.6; // Up to 60% of notifications shake at max chaos + const shakeIntensity = chaosLevel * (2 + Math.random() * 3); // Variable shake intensity + + return ( + +
+
+ {getServiceIcon(notification.type)} +
+ +
+
+ + {notification.type} + + {notification.time} +
+

+ {notification.title} +

+

+ {notification.message} +

+
+
+ + ); + })} + + + {/* Edge blur gradient overlays */} +
+ {/* Top edge fade */} +
+ {/* Bottom edge fade */} +
+ {/* Left edge fade */} +
+ {/* Right edge fade */} +
+
+ +
+
+ ); +} \ No newline at end of file