diff --git a/src/Form.tsx b/src/Form.tsx
index 64674dc..0d8a1f6 100644
--- a/src/Form.tsx
+++ b/src/Form.tsx
@@ -2,7 +2,7 @@ import './Form.scss'
 import CheckboxInput from './inputs/Checkbox'
 import TogglableColorPicker from './inputs/TogglableColorPicker'
 import IntegerInput from './inputs/Integer'
-import { Color, SwatchConfig } from './types'
+import { Color, SwatchConfig, StaggerType } from './types'
 import { getRandomNotWhiteColor } from './colorHelpers'
 import { totalColorSequenceLength, presetPickerColors } from './colorSequenceHelpers'
 import { mod } from './numberHelpers'
@@ -14,7 +14,7 @@ function Form(
   {
     swatchData: SwatchConfig,
     setSwatchData: (data: SwatchConfig) => void,
-    staggerType?: 'normal' | 'colorStretched' | 'colorSwallowed',
+    staggerType?: StaggerType,
     showExperimentalFeatures: boolean,
     className?: string,
   }
diff --git a/src/Swatch.tsx b/src/Swatch.tsx
index 0e1fef5..02793b5 100644
--- a/src/Swatch.tsx
+++ b/src/Swatch.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import { swatchMatrix, clusteredSwatchMatrix } from './swatchHelpers'
-import { StitchPattern, Color, ColorSequenceArray, ClusterConfiguration } from './types'
+import { StitchPattern, Color, ColorSequenceArray, ClusterConfiguration, StaggerType } from './types'
 import './Swatch.scss'
 
 const clusterConfiguration:Record<StitchPattern, (ClusterConfiguration | null)> = { //Todo: make this a class of some sort?
@@ -42,7 +42,7 @@ function Stitch ({color} : { color: Color}) {
 }
 
 function Swatch(
-  { colorSequence, stitchesPerRow, stitchPattern, numberOfRows = 40, colorShift = 0, staggerLengths = false, staggerType = "normal", className}
+  { colorSequence, stitchesPerRow, stitchPattern, numberOfRows = 40, colorShift = 0, staggerLengths = false, staggerType = 'normal', className}
   : {
     colorSequence: ColorSequenceArray,
     stitchesPerRow: number,
@@ -50,7 +50,7 @@ function Swatch(
     numberOfRows?: number,
     colorShift?: number,
     staggerLengths?: boolean,
-    staggerType?: 'normal' | 'colorStretched' | 'colorSwallowed'
+    staggerType?: StaggerType,
     className?: string
   }
 ) {
diff --git a/src/SwatchWithForm.tsx b/src/SwatchWithForm.tsx
index 3fe4ad9..dd8a927 100644
--- a/src/SwatchWithForm.tsx
+++ b/src/SwatchWithForm.tsx
@@ -1,13 +1,13 @@
 import Swatch from './Swatch';
 import Form from './Form';
-import { SwatchConfig } from './types'
+import { SwatchConfig, StaggerType } from './types'
 import { useState } from 'react';
 import CheckboxInput from './inputs/Checkbox'
 
 function SwatchWithForm({swatchConfig, setSwatchConfig, staggerType, showExperimentalFeatures, showRowNumbersInitially, formClasses, swatchClasses}  : {
   swatchConfig: SwatchConfig,
   setSwatchConfig: (arg0: SwatchConfig) => void,
-  staggerType?: 'normal' | 'colorStretched' | 'colorSwallowed'
+  staggerType?: StaggerType,
   showExperimentalFeatures?: boolean,
   showRowNumbersInitially?: boolean,
   formClasses?: string,
diff --git a/src/inputs/Dropdown.tsx b/src/inputs/Dropdown.tsx
index 6013bae..4b6d946 100644
--- a/src/inputs/Dropdown.tsx
+++ b/src/inputs/Dropdown.tsx
@@ -1,5 +1,7 @@
+import ClickableTooltip from '../ClickableTooltip';
+
 function Dropdown(
-  { value, name, label, title, setValue, items }
+  { value, name, label, title, setValue, items, withTooltip }
   : {
       value: string,
       name: string,
@@ -7,6 +9,7 @@ function Dropdown(
       title: string,
       setValue: (value: string) => void,
       items: Array<{value: string, label: string}>,
+      withTooltip?: boolean,
     }
   ){
 
@@ -16,6 +19,7 @@ function Dropdown(
         <label htmlFor={name} title={title}>
           {label}
         </label>
+        { withTooltip ? <ClickableTooltip title={title} /> : '' }
       </div>
       <select
         onChange={
diff --git a/src/projects/DoloresParkTote.tsx b/src/projects/DoloresParkTote.tsx
index 6ad995f..ebaf5e6 100644
--- a/src/projects/DoloresParkTote.tsx
+++ b/src/projects/DoloresParkTote.tsx
@@ -1,13 +1,11 @@
 import SwatchWithForm from '../SwatchWithForm';
-import { StitchPattern } from '../types'
+import { StitchPattern, StaggerType } from '../types'
 import { Fragment, useState, useEffect } from "react";
 import DropdownInput from '../inputs/Dropdown';
 import { dunaColorways, defaultDunaColorwayId } from '../colorways';
 import { totalColorSequenceLength, duplicateColorSequenceArray, matchColorwayToColorSequence } from '../colorSequenceHelpers';
 import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatchConfig } from '../URLSwatchParams';
 
-type StaggerType = 'colorStretched' | 'colorSwallowed'
-
 function DoloresParkTote() {
   const initialColorway = dunaColorways[defaultDunaColorwayId]
   const initialColorSequence = duplicateColorSequenceArray(initialColorway.colorSequence)
diff --git a/src/projects/StretchLengths.test.tsx b/src/projects/Experimental.test.tsx
similarity index 61%
rename from src/projects/StretchLengths.test.tsx
rename to src/projects/Experimental.test.tsx
index 7d9d82b..e844da1 100644
--- a/src/projects/StretchLengths.test.tsx
+++ b/src/projects/Experimental.test.tsx
@@ -1,13 +1,13 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter } from "react-router-dom";
-import StretchLengths from './StretchLengths'
+import Experimental from './Experimental'
 
-describe('StretchLengths', () => {
-  it('renders the StretchLengths component with a swatch in it', () => {
+describe('Experimental', () => {
+  it('renders the Experimental component with a swatch in it', () => {
     render(
       <MemoryRouter >
-        <StretchLengths />
+        <Experimental />
       </MemoryRouter>
     )
     expect(screen.getAllByTestId("swatch").length).toEqual(1)
diff --git a/src/projects/Experimental.tsx b/src/projects/Experimental.tsx
new file mode 100644
index 0000000..1859823
--- /dev/null
+++ b/src/projects/Experimental.tsx
@@ -0,0 +1,90 @@
+import SwatchWithForm from '../SwatchWithForm';
+import { StitchPattern, Color, StaggerType } from '../types'
+import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatchConfig } from '../URLSwatchParams';
+import { useState } from "react";
+import ColorSequenceInfo from '../ColorSequenceInfo'
+import DropdownInput from '../inputs/Dropdown';
+import { totalColorSequenceLength } from '../colorSequenceHelpers'
+
+const red = "#ff001d" as Color;
+const cream = "#fcf7eb" as Color;
+const ltblue = "#8dd0f2" as Color;
+const navy = "#0e0e66" as Color;
+
+function Experimental() {
+  const defaultSwatchConfig = {
+    colorSequence: [
+      {color: navy, length: 3},
+      {color: red, length: 3},
+      {color: navy, length: 3},
+      {color: ltblue, length: 2},
+      {color: cream, length: 5},
+      {color: ltblue, length: 2},
+    ],
+    stitchesPerRow: 18, //Note: explicitly ok not saving zero from search params here
+    numberOfRows: 40, //Note: explicitly ok not pulling zero from search params here
+    colorShift: 0,
+    staggerLengths: false,
+    stitchPattern: StitchPattern.moss,
+  }
+
+  const { swatchConfig, setSwatchConfig, setSearchParams} = useSwatchConfigStateFromURLParams(defaultSwatchConfig);
+
+  const [staggerType, setStaggerType] = useState('normal' as StaggerType)
+
+  const setStaggerTypeFromDropdown = (newStaggerType: string) => {
+    setStaggerType(newStaggerType as StaggerType)
+  }
+
+  useEffectToUpdateURLParamsFromSwatchConfig(swatchConfig, setSearchParams)
+
+  const numStitches = swatchConfig.stitchesPerRow * swatchConfig.numberOfRows
+  const numColorSequences = numStitches/totalColorSequenceLength(swatchConfig.colorSequence)
+
+  return (
+    <div>
+      <p>This is an experimental page. It might change at anytime and URLs can break.</p>
+      <p>Here are the current features:</p>
+      <ul>
+        <li>there is a button to double your colors that makes a copy of all the colors</li>
+        <li>there&rsquo;s more info about the colors you see</li>
+        <li>you can change stagger type (not saved on url)</li>
+      </ul>
+      <p>If you don&apos;t know what I&apos;m talking about use the <a href='/'>main app.</a></p>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className='wide-first-column'
+      >
+        <fieldset>
+          <ColorSequenceInfo colorSequence={swatchConfig.colorSequence} colorShift={swatchConfig.colorShift}/>
+          <p>In this swatch:</p>
+          <pre>Number of stitches/clusters displayed (might be wrong with a stagger type): {numStitches}</pre>
+          <pre>Number of {swatchConfig.colorSequence.length}-color color sequences displayed: {numColorSequences.toFixed(1)}</pre>
+          <DropdownInput
+            label="Row alternating technique:"
+            name="staggerType"
+            title="This changes how the piece behaves at the boundary between the end of an even row and beginning of an odd row when the checkbox is checked"
+            value={staggerType}
+            setValue={setStaggerTypeFromDropdown}
+            withTooltip={true}
+            items={[
+              {label: 'Display odd rows and even rows with different lengths', value: 'normal'},
+              {label: 'Color stretching (increasing tension)', value: 'colorStretched'},
+              {label: 'Color swallowing (loosening tension)', value: 'colorSwallowed'},
+            ]}
+          />
+        </fieldset>
+      </form>
+      <SwatchWithForm
+        swatchConfig={swatchConfig}
+        setSwatchConfig={setSwatchConfig}
+        staggerType={staggerType}
+        showExperimentalFeatures={true}
+      />
+    </div>
+  );
+}
+
+export default Experimental;
diff --git a/src/projects/StretchLengths.tsx b/src/projects/StretchLengths.tsx
deleted file mode 100644
index f3af62d..0000000
--- a/src/projects/StretchLengths.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import SwatchWithForm from '../SwatchWithForm';
-import { StitchPattern, Color } from '../types'
-import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatchConfig } from '../URLSwatchParams';
-
-const red = "#ff001d" as Color;
-const cream = "#fcf7eb" as Color;
-const ltblue = "#8dd0f2" as Color;
-const navy = "#0e0e66" as Color;
-
-function StretchLengths() {
-  const defaultSwatchConfig = {
-    colorSequence: [
-      {color: navy, length: 3},
-      {color: red, length: 3},
-      {color: navy, length: 3},
-      {color: ltblue, length: 2},
-      {color: cream, length: 5},
-      {color: ltblue, length: 2},
-    ],
-    stitchesPerRow: 18, //Note: explicitly ok not saving zero from search params here
-    numberOfRows: 40, //Note: explicitly ok not pulling zero from search params here
-    colorShift: 0,
-    staggerLengths: false,
-    stitchPattern: StitchPattern.moss,
-  }
-
-  const { swatchConfig, setSwatchConfig, setSearchParams} = useSwatchConfigStateFromURLParams(defaultSwatchConfig);
-
-  useEffectToUpdateURLParamsFromSwatchConfig(swatchConfig, setSearchParams)
-
-  return (
-    <div>
-      <p>This is an experimental page</p>
-      <ul>
-        <li>alternating row lengths uses the color stretching technique instead of changing lengths of rows</li>
-        <li>there is a button to double your colors</li>
-      </ul>
-      <p>If you don&apos;t know what I&apos;m talking about use the <a href='/'>main app.</a></p>
-      <SwatchWithForm
-        swatchConfig={swatchConfig}
-        setSwatchConfig={setSwatchConfig}
-        staggerType={'colorStretched'}
-        showExperimentalFeatures={true}
-      />
-    </div>
-  );
-}
-
-export default StretchLengths;
diff --git a/src/projects/SwimLesson.tsx b/src/projects/SwimLesson.tsx
index 26b95e8..7d1b16f 100644
--- a/src/projects/SwimLesson.tsx
+++ b/src/projects/SwimLesson.tsx
@@ -1,14 +1,12 @@
 import './SwimLesson.scss';
 import SwatchWithForm from '../SwatchWithForm';
 import Swatch from '../Swatch';
-import { StitchPattern, ColorSequenceArray } from '../types'
+import { StitchPattern, ColorSequenceArray, StaggerType } from '../types'
 import { Fragment, useState } from "react";
 import DropdownInput from '../inputs/Dropdown';
 import { totalColorSequenceLength } from '../colorSequenceHelpers';
 import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatchConfig } from '../URLSwatchParams';
 
-type StaggerType = 'colorStretched' | 'colorSwallowed'
-
 function SwimLesson() {
   const initialColorSequence = [
     { color: "#d6dfd7", length: 8 },
diff --git a/src/types.ts b/src/types.ts
index 29911af..f108655 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,8 @@
 import { DeepReadonly } from 'ts-essentials'
 
+// consider making this an enum later. I can say `const foo = 'whatever' as StaggerType` right now.
+export type StaggerType = 'colorStretched' | 'colorSwallowed' | 'normal'
+
 export enum StitchPattern {
   unstyled = "unstyled",
   moss = "moss",
diff --git a/src/wrapper.tsx b/src/wrapper.tsx
index 4358714..5220e67 100644
--- a/src/wrapper.tsx
+++ b/src/wrapper.tsx
@@ -6,7 +6,7 @@ import Preview from './projects/Preview'
 import Sunflower from './projects/Sunflower'
 import Doodle from './projects/Doodle'
 import LogoOption from './projects/LogoOption'
-import StretchLengths from './projects/StretchLengths'
+import Experimental from './projects/Experimental'
 import Parallax from './projects/Parallax'
 import DoloresParkTote from './projects/DoloresParkTote'
 import SwimLesson from './projects/SwimLesson'
@@ -37,7 +37,7 @@ const router = createBrowserRouter([
   },
   {
     path: "/experimental",
-    element: <StretchLengths/>
+    element: <Experimental/>
   },
   {
     path: "/parallax",