@entropy-softworks/ui 2026.7.31

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,120 @@
+import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
+import { cn } from "../utils/cn";
+import React from "react";
+import { Platform, View, type ViewStyle } from "react-native";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => {
+  const content = (
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1",
+        className
+      )}
+      style={
+        Platform.OS === "web"
+          ? ({ boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)" } as ViewStyle &
+              Record<string, unknown>)
+          : undefined
+      }
+      {...props}
+    />
+  );
+
+  if (Platform.OS === "web") {
+    // On web, Portal expects exactly one child — skip the Overlay (Radix
+    // handles dismiss-on-click-outside internally).
+    return <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>;
+  }
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Overlay className="animate-in fade-in-0" />
+      {content}
+    </DropdownMenuPrimitive.Portal>
+  );
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex flex-row items-center rounded-sm px-2 py-1.5 web:cursor-pointer web:outline-none active:bg-accent",
+      "web:hover:bg-accent web:focus:bg-accent",
+      props.disabled && "opacity-50 web:pointer-events-none",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex flex-row items-center rounded-sm py-1.5 pl-8 pr-2 web:cursor-pointer web:outline-none active:bg-accent",
+      "web:hover:bg-accent web:focus:bg-accent",
+      props.disabled && "opacity-50 web:pointer-events-none",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        {/* Checkmark indicator */}
+      </DropdownMenuPrimitive.ItemIndicator>
+    </View>
+    {children as React.ReactNode}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+};

package/src/components/entropy-boot-splash.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, Easing, Platform, StyleSheet, View } from "react-native";
+import { useColorScheme } from "nativewind";
+import Svg, { Path } from "react-native-svg";
+import { ENTROPY_MARK_ASPECT, ENTROPY_MARK_PATH, ENTROPY_MARK_VIEWBOX } from "./entropy-mark";
+import { usePalette } from "../utils/palette";
+import { DISABLE_BRANDING } from "../flags";
+
+// Web has no native animated module; requesting the native driver there just
+// warns and falls back to JS. Gate it so the console stays clean.
+const USE_NATIVE_DRIVER = Platform.OS !== "web";
+
+export interface EntropyBootSplashProps {
+  /** Called once the intro + hold + fade-out finishes. */
+  onFinish?: () => void;
+  /** Mark height in px. */
+  size?: number;
+  /** "chroma" (default) shows the faint cyan/red fringe; "mono" is plain. */
+  variant?: "mono" | "chroma";
+  /** Override background; defaults to themed near-black / white. */
+  background?: string;
+  /** ms to hold fully-drifted before fading out. Default 550. */
+  holdMs?: number;
+}
+
+/**
+ * Company boot splash — the website's logo motion as a launch animation: the
+ * mark fades in flat, the three echoes drift apart + breathe (driven by
+ * EntropyMarkAnimated's `active` state — the same motion source as the
+ * website hover), hold, then the whole thing fades out and calls `onFinish`.
+ * Subtle corporate recognition at launch; each product keeps its own
+ * icon/splash for the OS-level launch screen — this is an in-app overlay.
+ */
+export function EntropyBootSplash({
+  onFinish,
+  size = 96,
+  // `variant` is retained on the props interface for API compatibility but the
+  // current flat-mark splash renders the same regardless, so it isn't read.
+  background,
+  holdMs = 550,
+}: EntropyBootSplashProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const { palette } = usePalette();
+  // Match the app's themed background exactly (bg-background) so there's no
+  // color seam when the splash dismisses into the screen behind it.
+  const bg = background ?? palette.background;
+
+  const fade = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    // Self-host branding opt-out: skip the splash entirely, let the app proceed.
+    if (DISABLE_BRANDING) {
+      onFinish?.();
+      return;
+    }
+    const anim = Animated.sequence([
+      Animated.timing(fade, {
+        toValue: 1,
+        duration: 320,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: USE_NATIVE_DRIVER,
+      }),
+      // mark's own open-ease (~450ms) + breathing run during the hold
+      Animated.delay(900 + holdMs),
+      Animated.timing(fade, {
+        toValue: 0,
+        duration: 420,
+        easing: Easing.in(Easing.quad),
+        useNativeDriver: USE_NATIVE_DRIVER,
+      }),
+    ]);
+    anim.start(({ finished }) => {
+      if (finished) {
+        onFinish?.();
+      }
+    });
+    return () => anim.stop();
+    // run once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (DISABLE_BRANDING) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          backgroundColor: bg,
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none",
+        },
+      ]}
+    >
+      {/* Static flat source mark — the topmost layer only, monochromatic to the
+          theme (black in light, white in dark). No echoes, no motion. */}
+      <Animated.View style={{ opacity: fade }}>
+        <Svg
+          width={Math.round(size * ENTROPY_MARK_ASPECT)}
+          height={size}
+          viewBox={ENTROPY_MARK_VIEWBOX}
+        >
+          <Path d={ENTROPY_MARK_PATH} fillRule="evenodd" fill={isDark ? "#ffffff" : "#000000"} />
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+}
+
+export default EntropyBootSplash;

package/src/components/entropy-mark-animated.tsx

@@ -0,0 +1,260 @@
+import React, { useEffect } from "react";
+import { View, type GestureResponderEvent } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+  type SharedValue,
+} from "react-native-reanimated";
+import { useColorScheme } from "nativewind";
+import {
+  ENTROPY_MARK_ASPECT,
+  ENTROPY_MARK_PATH,
+  ENTROPY_MARK_STEP,
+  ENTROPY_MARK_VIEWBOX,
+} from "./entropy-mark-geometry";
+
+// React Native port of the website's animated company mark
+// (website/src/components/logo.tsx). Same motion model, hover → touch:
+//
+//  • At rest the mark is FLAT — sharp source `>_` only, echoes collapsed
+//    underneath it (invisible).
+//  • While pressed, `open` eases 0→1: the three grey time-echoes fade in and
+//    drift apart, each breathing on its own period/phase so they never move
+//    in lockstep (the endless, unevenly-spaced cascade).
+//  • Parallax: while pressed, the echoes lean toward the finger (deeper
+//    echoes shift more = depth), gated by `open` so it fades with collapse.
+//  • On release, `open` eases 1→0 and the echoes resolve cleanly back into
+//    the source — no snap.
+//  • The sharp source NEVER moves (anchored), and each echo lives on its own
+//    Animated.View layer so the source is never re-rasterized mid-animation
+//    (the compositor lesson from the web version).
+//
+// Honors the system reduce-motion setting via ReduceMotion.System.
+
+// echo keyed by depth (3 = furthest/dimmest .. 1 = nearest the source)
+const PALETTE = {
+  light: {
+    src: "#000000",
+    echo: { 3: "#f5f5f5", 2: "#e2e2e2", 1: "#cbcbcb" },
+    cyan: "#0096aa",
+    red: "#c82837",
+  },
+  dark: {
+    src: "#ffffff",
+    echo: { 3: "#373737", 2: "#5f5f5f", 1: "#8c8c8c" },
+    cyan: "#268ca0",
+    red: "#a53440",
+  },
+} as const;
+
+// Matches the web component: breathing reach per echo depth, parallax px per
+// depth-step, breathing period 2.6+i*0.7s with staggered phase.
+const AMP: Record<1 | 2 | 3, number> = { 3: 1.55, 2: 1.4, 1: 1.6 };
+const PX = 9;
+const PY = 7;
+
+export interface EntropyMarkAnimatedProps {
+  /** Rendered height in px. Width follows the ~1.63:1 aspect. */
+  size?: number;
+  /** "mono" = grey echoes only; "chroma" = adds the faint cyan/red fringe. */
+  variant?: "mono" | "chroma";
+  /** Override the theme; defaults to the active color scheme. */
+  scheme?: "light" | "dark";
+  /** Force the drifted-apart state (e.g. boot splash drives this). */
+  active?: boolean;
+  /** Drift apart while touched (default true). */
+  animateOnPress?: boolean;
+}
+
+function Echo({
+  depth,
+  fill,
+  open,
+  px,
+  py,
+  width,
+  height,
+}: {
+  depth: 1 | 2 | 3;
+  fill: string;
+  open: SharedValue<number>;
+  px: SharedValue<number>;
+  py: SharedValue<number>;
+  width: number;
+  height: number;
+}) {
+  // Breathing oscillator 0..1, own period + phase per depth → desynced.
+  const breath = useSharedValue(0);
+  useEffect(() => {
+    const half = ((2.6 + depth * 0.7) * 1000) / 2;
+    const ease = Easing.inOut(Easing.sin);
+    breath.value = withDelay(
+      depth * 400,
+      withRepeat(
+        withSequence(
+          withTiming(1, { duration: half, easing: ease, reduceMotion: ReduceMotion.System }),
+          withTiming(0, { duration: half, easing: ease, reduceMotion: ReduceMotion.System })
+        ),
+        -1,
+        false,
+        undefined,
+        ReduceMotion.System
+      )
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [depth]);
+
+  const style = useAnimatedStyle(() => {
+    // Offset = base drift * breathing multiplier (1..AMP) + parallax lean,
+    // all scaled by `open` so rest = exactly collapsed under the source.
+    const m = 1 + (AMP[depth] - 1) * breath.value;
+    const tx = depth * ENTROPY_MARK_STEP.x * open.value * m + depth * PX * px.value * open.value;
+    const ty = depth * ENTROPY_MARK_STEP.y * open.value * m + depth * PY * py.value * open.value;
+    return {
+      opacity: open.value,
+      transform: [{ translateX: tx }, { translateY: ty }],
+    };
+  });
+
+  return (
+    <Animated.View style={[{ position: "absolute", width, height, pointerEvents: "none" }, style]}>
+      <Svg width={width} height={height} viewBox={ENTROPY_MARK_VIEWBOX}>
+        <Path d={ENTROPY_MARK_PATH} fillRule="evenodd" fill={fill} />
+      </Svg>
+    </Animated.View>
+  );
+}
+
+/**
+ * Touch-interactive company `>_` mark — flat at rest, echo-cascade + parallax
+ * while pressed, clean collapse on release. The RN twin of the website logo.
+ */
+export function EntropyMarkAnimated({
+  size = 28,
+  variant = "mono",
+  scheme,
+  active = false,
+  animateOnPress = true,
+}: EntropyMarkAnimatedProps) {
+  const { colorScheme } = useColorScheme();
+  const p = PALETTE[scheme ?? (colorScheme === "dark" ? "dark" : "light")];
+  const width = Math.round(size * ENTROPY_MARK_ASPECT);
+
+  const open = useSharedValue(active ? 1 : 0);
+  const px = useSharedValue(0);
+  const py = useSharedValue(0);
+
+  useEffect(() => {
+    open.value = withTiming(active ? 1 : 0, {
+      duration: 450,
+      easing: Easing.out(Easing.cubic),
+      reduceMotion: ReduceMotion.System,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active]);
+
+  const track = (e: GestureResponderEvent) => {
+    // Normalize finger position over the mark to -1..1 (parallax input).
+    const nx = Math.max(-1, Math.min(1, (e.nativeEvent.locationX / width - 0.5) * 2));
+    const ny = Math.max(-1, Math.min(1, (e.nativeEvent.locationY / size - 0.5) * 2));
+    px.value = withTiming(nx, { duration: 80, reduceMotion: ReduceMotion.System });
+    py.value = withTiming(ny, { duration: 80, reduceMotion: ReduceMotion.System });
+  };
+
+  const press = (down: boolean) => (e: GestureResponderEvent) => {
+    if (!animateOnPress) {
+      return;
+    }
+    if (down) {
+      track(e);
+      open.value = withTiming(1, {
+        duration: 450,
+        easing: Easing.out(Easing.cubic),
+        reduceMotion: ReduceMotion.System,
+      });
+    } else {
+      // Release: echoes resolve back into the source, parallax recenters.
+      open.value = withTiming(active ? 1 : 0, {
+        duration: 500,
+        easing: Easing.inOut(Easing.cubic),
+        reduceMotion: ReduceMotion.System,
+      });
+      px.value = withTiming(0, { duration: 500, reduceMotion: ReduceMotion.System });
+      py.value = withTiming(0, { duration: 500, reduceMotion: ReduceMotion.System });
+    }
+  };
+
+  const chromaStyle = useAnimatedStyle(() => ({ opacity: open.value }));
+
+  return (
+    <View
+      style={{ width, height: size }}
+      onStartShouldSetResponder={() => animateOnPress}
+      onResponderGrant={press(true)}
+      onResponderMove={track}
+      onResponderRelease={press(false)}
+      onResponderTerminate={press(false)}
+    >
+      {/* echoes: far (dim) → near, each on its own compositor layer */}
+      {([3, 2, 1] as const).map((i) => (
+        <Echo
+          key={i}
+          depth={i}
+          fill={p.echo[i]}
+          open={open}
+          px={px}
+          py={py}
+          width={width}
+          height={size}
+        />
+      ))}
+
+      {/* chroma fringe — rides `open` (sharp offset; RN SVG has no cheap blur) */}
+      {variant === "chroma" ? (
+        <Animated.View
+          style={[
+            { position: "absolute", width, height: size, pointerEvents: "none" },
+            chromaStyle,
+          ]}
+        >
+          <Svg width={width} height={size} viewBox={ENTROPY_MARK_VIEWBOX}>
+            <Path
+              d={ENTROPY_MARK_PATH}
+              fillRule="evenodd"
+              fill={p.cyan}
+              opacity={0.5}
+              transform="translate(10 8)"
+            />
+            <Path
+              d={ENTROPY_MARK_PATH}
+              fillRule="evenodd"
+              fill={p.red}
+              opacity={0.45}
+              transform="translate(-10 -8)"
+            />
+          </Svg>
+        </Animated.View>
+      ) : null}
+
+      {/* sharp source — always visible, never moves (anchored). Absolutely
+          positioned + last in the tree so it paints ON TOP of the absolutely-
+          positioned echo/chroma layers on web too: CSS paints positioned
+          siblings above static ones regardless of DOM order, so a static
+          source would otherwise be buried under the echoes on web. */}
+      <View style={{ position: "absolute", width, height: size, pointerEvents: "none" }}>
+        <Svg width={width} height={size} viewBox={ENTROPY_MARK_VIEWBOX}>
+          <Path d={ENTROPY_MARK_PATH} fillRule="evenodd" fill={p.src} />
+        </Svg>
+      </View>
+    </View>
+  );
+}
+
+export default EntropyMarkAnimated;

package/src/components/entropy-mark-geometry.ts

@@ -0,0 +1,11 @@
+// Geometry of the Entropy Softworks company mark (`>_`), shared by the static
+// `EntropyMark` and the animated `EntropyMarkAnimated`. Lives in its own module
+// so both can import it without the two components importing each other (which
+// formed a require cycle). Kept in sync with the website
+// (website/src/components/logo.tsx).
+
+export const ENTROPY_MARK_VIEWBOX = "300 562 1311 805";
+export const ENTROPY_MARK_ASPECT = 1311 / 805;
+export const ENTROPY_MARK_PATH =
+  "M 869,1057.5 L 672,1057.5 L 673,1055.5 L 752.5,1015 L 606.5,941 L 632.5,894 L 633.5,892 L 632,890.5 L 449.5,798 L 449.5,648 L 703,776.5 L 704.5,779 L 679.5,822 L 678,827.5 L 867,923.5 L 869.5,926 L 869,1057.5 Z M 804,1201.5 L 524,1201.5 L 523.5,1194 L 743,1081.5 L 989.5,1082 L 989.5,1106 L 988,1107.5 L 804,1201.5 Z M 1597,1331.5 L 1524,1331.5 L 1354.5,1162 L 1597,1161.5 L 1597,1331.5 Z M 1479,1353.5 L 1011,1353.5 L 1009.5,1352 L 1009.5,1184 L 1310,1183.5 L 1479,1353.5 Z M 404,1344.5 L 404,1225.5 L 635.5,1226 L 404,1344.5 Z";
+export const ENTROPY_MARK_STEP = { x: -30, y: -24 };

package/src/components/entropy-mark-sequential.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  type SharedValue,
+} from "react-native-reanimated";
+import { useColorScheme } from "nativewind";
+import {
+  ENTROPY_MARK_ASPECT,
+  ENTROPY_MARK_PATH,
+  ENTROPY_MARK_STEP,
+  ENTROPY_MARK_VIEWBOX,
+} from "./entropy-mark";
+
+// Boot/loading variant of the company mark: instead of all echoes drifting +
+// breathing at once (the website hover), exactly ONE layer is visible at a
+// time. A single pulse travels through the depth layers in sequence — furthest
+// echo → … → sharp source — then loops forever. Each layer sits at its own
+// echo offset (drifted up-left by depth × STEP), so the pulse reads as the mark
+// converging from the deep echoes into the source.
+
+interface MarkColors {
+  src: string;
+  echo: Record<1 | 2 | 3, string>;
+}
+const COLORS: Record<"light" | "dark", MarkColors> = {
+  light: { src: "#000000", echo: { 3: "#cbcbcb", 2: "#a3a3a3", 1: "#525252" } },
+  dark: { src: "#ffffff", echo: { 3: "#373737", 2: "#5f5f5f", 1: "#8c8c8c" } },
+};
+
+// Order the pulse travels: sharp source first → out through the echoes.
+const DEPTHS = [0, 1, 2, 3] as const; // 0 = source
+const COUNT = DEPTHS.length;
+
+export interface EntropyMarkSequentialProps {
+  /** Rendered height in px. Width follows the ~1.63:1 aspect. */
+  size?: number;
+  /** Override the theme; defaults to the active color scheme. */
+  scheme?: "light" | "dark";
+  /** Full-cycle duration in ms (time to sweep through all layers once). */
+  durationMs?: number;
+}
+
+function Layer({
+  prog,
+  index,
+  width,
+  size,
+  color,
+  offsetX,
+  offsetY,
+}: {
+  prog: SharedValue<number>;
+  index: number;
+  width: number;
+  size: number;
+  color: string;
+  offsetX: number;
+  offsetY: number;
+}) {
+  const style = useAnimatedStyle(() => {
+    // Triangular pulse centered on this layer's slot; near-zero at the
+    // neighbours' centers so only one layer is lit at a time. Wraps so the
+    // loop has no seam.
+    const center = (index + 0.5) / COUNT;
+    let d = Math.abs(prog.value - center);
+    d = Math.min(d, 1 - d);
+    const opacity = Math.max(0, Math.min(1, 1 - d * COUNT * 1.15));
+    return { opacity };
+  });
+  return (
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          width,
+          height: size,
+          pointerEvents: "none",
+          transform: [{ translateX: offsetX }, { translateY: offsetY }],
+        },
+        style,
+      ]}
+    >
+      <Svg width={width} height={size} viewBox={ENTROPY_MARK_VIEWBOX}>
+        <Path d={ENTROPY_MARK_PATH} fillRule="evenodd" fill={color} />
+      </Svg>
+    </Animated.View>
+  );
+}
+
+export function EntropyMarkSequential({
+  size = 96,
+  scheme,
+  durationMs = 1000,
+}: EntropyMarkSequentialProps) {
+  const { colorScheme } = useColorScheme();
+  const c = COLORS[scheme ?? (colorScheme === "dark" ? "dark" : "light")];
+  const width = Math.round(size * ENTROPY_MARK_ASPECT);
+
+  const prog = useSharedValue(0);
+  useEffect(() => {
+    prog.value = withRepeat(
+      withTiming(1, { duration: durationMs, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [prog, durationMs]);
+
+  return (
+    <View style={{ width, height: size }}>
+      {DEPTHS.map((depth, index) => (
+        <Layer
+          key={depth}
+          prog={prog}
+          index={index}
+          width={width}
+          size={size}
+          color={depth === 0 ? c.src : c.echo[depth]}
+          offsetX={depth * ENTROPY_MARK_STEP.x}
+          offsetY={depth * ENTROPY_MARK_STEP.y}
+        />
+      ))}
+    </View>
+  );
+}
+
+export default EntropyMarkSequential;