@ssgoi/core 0.0.1

package/src/lib/transitions/fade.ts

@@ -0,0 +1,33 @@
+interface FadeOptions {
+  from?: number;
+  to?: number;
+  spring?: {
+    stiffness?: number;
+    damping?: number;
+  };
+}
+
+export const fade = (options: FadeOptions = {}) => {
+  const {
+    from = 0,
+    to = 1,
+    spring = { stiffness: 300, damping: 30 }
+  } = options;
+
+  return {
+    in: (element: HTMLElement) => ({
+      spring,
+      tick: (progress: number) => {
+        const opacity = from + (to - from) * progress;
+        element.style.opacity = opacity.toString();
+      }
+    }),
+    out: (element: HTMLElement) => ({
+      spring,
+      tick: (progress: number) => {
+        const opacity = from + (to - from) * progress;
+        element.style.opacity = opacity.toString();
+      }
+    })
+  };
+};

package/src/lib/transitions/index.ts

@@ -0,0 +1,7 @@
+export * from './fade';
+export * from './scale';
+export * from './slide';
+export * from './rotate';
+export * from './bounce';
+export * from './blur';
+export * from './none';

package/src/lib/transitions/none.ts

@@ -0,0 +1,27 @@
+interface NoneOptions {
+  spring?: {
+    stiffness?: number;
+    damping?: number;
+  };
+}
+
+export const none = (options: NoneOptions = {}) => {
+  const {
+    spring = { stiffness: 1000, damping: 100 }
+  } = options;
+
+  return {
+    in: (_element: HTMLElement) => ({
+      spring,
+      tick: (_progress: number) => {
+        // No animation, just instantly show
+      }
+    }),
+    out: (_element: HTMLElement) => ({
+      spring,
+      tick: (_progress: number) => {
+        // No animation, just instantly hide
+      }
+    })
+  };
+};

package/src/lib/transitions/rotate.ts

@@ -0,0 +1,57 @@
+interface RotateOptions {
+  degrees?: number;
+  clockwise?: boolean;
+  scale?: boolean;
+  fade?: boolean;
+  spring?: {
+    stiffness?: number;
+    damping?: number;
+  };
+}
+
+export const rotate = (options: RotateOptions = {}) => {
+  const {
+    degrees = 360,
+    clockwise = true,
+    scale = false,
+    fade = false,
+    spring = { stiffness: 500, damping: 25 }
+  } = options;
+
+  const rotation = clockwise ? degrees : -degrees;
+
+  return {
+    in: (element: HTMLElement) => ({
+      spring,
+      tick: (progress: number) => {
+        const transforms = [`rotate(${progress * rotation}deg)`];
+        
+        if (scale) {
+          transforms.push(`scale(${progress})`);
+        }
+        
+        element.style.transform = transforms.join(' ');
+        
+        if (fade) {
+          element.style.opacity = progress.toString();
+        }
+      }
+    }),
+    out: (element: HTMLElement) => ({
+      spring,
+      tick: (progress: number) => {
+        const transforms = [`rotate(${progress * rotation}deg)`];
+        
+        if (scale) {
+          transforms.push(`scale(${progress})`);
+        }
+        
+        element.style.transform = transforms.join(' ');
+        
+        if (fade) {
+          element.style.opacity = progress.toString();
+        }
+      }
+    })
+  };
+};

package/src/lib/transitions/scale.ts

@@ -0,0 +1,34 @@
+interface ScaleOptions {
+  duration?: number;
+  from?: number;
+  to?: number;
+  spring?: {
+    stiffness?: number;
+    damping?: number;
+  };
+}
+
+export const scale = (options: ScaleOptions = {}) => {
+  const {
+    from = 0,
+    to = 1,
+    spring = { stiffness: 300, damping: 30 }
+  } = options;
+
+  return {
+    in: (element: HTMLElement) => ({
+      spring,
+      tick: (progress: number) => {
+        const value = from + (to - from) * progress;
+        element.style.transform = `scale(${value})`;
+      }
+    }),
+    out: (element: HTMLElement) => ({
+      spring,
+      tick: (progress: number) => {
+        const value = from + (to - from) * progress;
+        element.style.transform = `scale(${value})`;
+      }
+    })
+  };
+};

package/src/lib/transitions/slide.ts

@@ -0,0 +1,53 @@
+interface SlideOptions {
+  direction?: 'left' | 'right' | 'up' | 'down';
+  distance?: number;
+  fade?: boolean;
+  spring?: {
+    stiffness?: number;
+    damping?: number;
+  };
+}
+
+export const slide = (options: SlideOptions = {}) => {
+  const {
+    direction = 'left',
+    distance = 100,
+    fade = true,
+    spring = { stiffness: 400, damping: 35 }
+  } = options;
+
+  const getTransform = (progress: number) => {
+    const offset = (1 - progress) * distance;
+    switch (direction) {
+      case 'left':
+        return `translateX(${-offset}px)`;
+      case 'right':
+        return `translateX(${offset}px)`;
+      case 'up':
+        return `translateY(${-offset}px)`;
+      case 'down':
+        return `translateY(${offset}px)`;
+    }
+  };
+
+  return {
+    in: (element: HTMLElement) => ({
+      spring,
+      tick: (progress: number) => {
+        element.style.transform = getTransform(progress);
+        if (fade) {
+          element.style.opacity = progress.toString();
+        }
+      }
+    }),
+    out: (element: HTMLElement) => ({
+      spring,
+      tick: (progress: number) => {
+        element.style.transform = getTransform(progress);
+        if (fade) {
+          element.style.opacity = progress.toString();
+        }
+      }
+    })
+  };
+};

package/src/lib/types.ts

@@ -0,0 +1,60 @@
+export type TransitionKey = string | symbol;
+
+export type SpringConfig = {
+  stiffness?: number;
+  damping?: number;
+};
+
+export type TransitionConfig = {
+  // Spring physics configuration
+  spring?: SpringConfig; // Default: { stiffness: 300, damping: 30 }
+
+  // Callback for each frame with progress value (0-1)
+  tick?: (progress: number) => void;
+
+  // Prepare element before animation (typically for out transitions)
+  prepare?: (element: HTMLElement) => void;
+
+  // Called when animation starts
+  onStart?: () => void;
+
+  // Called when animation ends
+  onEnd?: () => void;
+};
+
+export type GetTransitionConfig<TContext = undefined> =
+  TContext extends undefined
+    ? (node: HTMLElement) => TransitionConfig | Promise<TransitionConfig>
+    : (
+        node: HTMLElement,
+        context: TContext
+      ) => TransitionConfig | Promise<TransitionConfig>;
+
+export type Transition<TContext = undefined> = {
+  in?: GetTransitionConfig<TContext>;
+  out?: GetTransitionConfig<TContext>;
+};
+
+export type TransitionCallback = (
+  element: HTMLElement | null
+) => void | (() => void);
+
+export type SggoiTransitionContext = {
+  scrollOffset: { x: number; y: number };
+};
+
+export type SggoiTransition = Transition<SggoiTransitionContext>;
+
+export type SsgoiConfig = {
+  transitions: {
+    from: string;
+    to: string;
+    transition: SggoiTransition;
+    symmetric?: boolean;
+  }[];
+  defaultTransition?: SggoiTransition;
+};
+
+export type SsgoiContext = (
+  path: string
+) => Transition & { key: TransitionKey };

package/src/lib/utils.ts

@@ -0,0 +1,39 @@
+/**
+ * Applies common styles for outgoing page elements
+ * Makes the element absolute positioned to allow the incoming page to take its place
+ */
+export const prepareOutgoing = (element: HTMLElement): void => {
+  element.style.position = "absolute";
+  element.style.width = "100%";
+  element.style.top = "0";
+  element.style.left = "0";
+};
+
+/**
+ * Gets the scrolling element that contains the given element
+ * Returns the first scrollable parent element or document.documentElement
+ */
+export const getScrollingElement = (element: HTMLElement): HTMLElement => {
+  let current = element.parentElement;
+  
+  while (current && current !== document.body) {
+    const style = window.getComputedStyle(current);
+    const overflow = style.overflow + style.overflowY + style.overflowX;
+    
+    // Check if element is scrollable
+    if (overflow.includes('auto') || overflow.includes('scroll')) {
+      return current;
+    }
+    
+    // Also check if element has scroll even without explicit overflow
+    if (current.scrollHeight > current.clientHeight || 
+        current.scrollWidth > current.clientWidth) {
+      return current;
+    }
+    
+    current = current.parentElement;
+  }
+  
+  // Return document element as fallback (handles body/html scrolling)
+  return document.documentElement;
+};

package/src/lib/view-transitions/fade.ts

@@ -0,0 +1,29 @@
+import type { SpringConfig, SggoiTransition } from "../types";
+import { prepareOutgoing } from "../utils";
+
+interface FadeOptions {
+  spring?: Partial<SpringConfig>;
+}
+
+export const fade = (options: FadeOptions = {}): SggoiTransition => {
+  const spring: SpringConfig = {
+    stiffness: options.spring?.stiffness ?? 300,
+    damping: options.spring?.damping ?? 30,
+  };
+
+  return {
+    in: (element) => ({
+      spring,
+      tick: (progress) => {
+        element.style.opacity = progress.toString();
+      },
+    }),
+    out: (element) => ({
+      spring,
+      tick: (progress) => {
+        element.style.opacity = progress.toString();
+      },
+      prepare: prepareOutgoing,
+    }),
+  };
+};

package/src/lib/view-transitions/hero.ts

@@ -0,0 +1,179 @@
+import type { SpringConfig, SggoiTransition } from "../types";
+import { prepareOutgoing } from "../utils";
+
+interface HeroOptions {
+  spring?: Partial<SpringConfig>;
+  timeout?: number;
+}
+
+function getHeroEl(page: HTMLElement, key: string): HTMLElement | null {
+  return page.querySelector(`[data-hero-key="${key}"]`);
+}
+
+function getRect(root: HTMLElement, el: HTMLElement): DOMRect {
+  const rootRect = root.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+
+  return new DOMRect(
+    elRect.left - rootRect.left,
+    elRect.top - rootRect.top,
+    elRect.width,
+    elRect.height
+  );
+}
+
+export const hero = (options: HeroOptions = {}): SggoiTransition => {
+  const spring: SpringConfig = {
+    stiffness: options.spring?.stiffness ?? 300,
+    damping: options.spring?.damping ?? 30,
+  };
+  const timeout = options.timeout ?? 300;
+
+  // Closure variables to share state between in/out
+  let fromNode: HTMLElement | null = null;
+  let resolver: ((value: boolean) => void) | null = null;
+
+  return {
+    in: async (element, context) => {
+      const toNode = element;
+
+      // Find all hero elements in the incoming page
+      const heroEls = Array.from(toNode.querySelectorAll("[data-hero-key]"));
+      if (heroEls.length === 0) {
+        return {
+          spring,
+          tick: () => {}, // No hero elements, skip animation
+        };
+      }
+
+      // Wait for fromNode to be set by out transition
+      const hasFromNode = await new Promise<boolean>((resolve) => {
+        if (fromNode) {
+          // fromNode already set by out transition
+          resolve(true);
+        } else {
+          // Store resolver for out transition to call
+          resolver = resolve;
+          // Timeout fallback
+          setTimeout(() => {
+            resolver = null;
+            resolve(false);
+          }, timeout);
+        }
+      });
+
+      if (!hasFromNode || !fromNode) {
+        fromNode = null;
+        return {
+          spring,
+          tick: () => {}, // No fromNode, skip animation
+        };
+      }
+
+      // Calculate animations for matching hero elements
+      const heroAnimations = heroEls
+        .map((heroEl) => {
+          const key = heroEl.getAttribute("data-hero-key");
+          if (!key) return null;
+
+          const fromEl = getHeroEl(fromNode!, key);
+          if (!fromEl) return null;
+
+          const toEl = heroEl as HTMLElement;
+
+          // Calculate animation parameters
+          const fromRect = getRect(fromNode!, fromEl);
+          const toRect = getRect(toNode, toEl);
+          const dx = fromRect.left - toRect.left - context.scrollOffset.x;
+          const dy = fromRect.top - toRect.top - context.scrollOffset.y;
+          const dw = fromRect.width / toRect.width;
+          const dh = fromRect.height / toRect.height;
+
+          // Store original styles
+          const originalTransform = toEl.style.transform;
+          const originalPosition = toEl.style.position;
+          const originalTransformOrigin = toEl.style.transformOrigin;
+
+          return {
+            toEl,
+            dx,
+            dy,
+            dw,
+            dh,
+            originalTransform,
+            originalPosition,
+            originalTransformOrigin,
+          };
+        })
+        .filter(Boolean) as Array<{
+        toEl: HTMLElement;
+        dx: number;
+        dy: number;
+        dw: number;
+        dh: number;
+        originalTransform: string;
+        originalPosition: string;
+        originalTransformOrigin: string;
+      }>;
+
+      // Reset fromNode for next transition
+      fromNode = null;
+
+      if (heroAnimations.length === 0) {
+        return {
+          spring,
+          tick: () => {}, // No matching hero elements
+        };
+      }
+
+      return {
+        spring,
+        prepare: () => {
+          heroAnimations.forEach(({ toEl }) => {
+            toEl.style.position = "relative";
+            toEl.style.transformOrigin = "top left";
+          });
+        },
+        tick: (progress) => {
+          // Animate all hero elements
+          heroAnimations.forEach(({ toEl, dx, dy, dw, dh }) => {
+            toEl.style.transform = `translate(${(1 - progress) * dx}px,${(1 - progress) * dy}px) scale(${progress + (1 - progress) * dw}, ${progress + (1 - progress) * dh})`;
+          });
+        },
+        onEnd: () => {
+          // Reset all hero elements
+          heroAnimations.forEach(
+            ({
+              toEl,
+              originalTransform,
+              originalPosition,
+              originalTransformOrigin,
+            }) => {
+              toEl.style.transform = originalTransform;
+              toEl.style.position = originalPosition;
+              toEl.style.transformOrigin = originalTransformOrigin;
+            }
+          );
+        },
+      };
+    },
+    out: async (element) => {
+      return {
+        onStart: () => {
+          // Store fromNode
+          fromNode = element;
+
+          // If there's a waiting resolver, resolve it
+          if (resolver) {
+            resolver(true);
+            resolver = null;
+          }
+        },
+        prepare: (element) => {
+          prepareOutgoing(element);
+          element.style.opacity = "0";
+        },
+      };
+    },
+  };
+};

package/src/lib/view-transitions/index.ts

@@ -0,0 +1,4 @@
+export * from "./fade";
+export * from "./hero";
+export * from "./pinterest";
+export * from "./ripple";