diff --git a/README.md b/README.md
index f273f6ba..873c84f4 100644
--- a/README.md
+++ b/README.md
@@ -144,23 +144,24 @@ Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issue
 
 ## 🔧 Options
 
-|    Parameter    |                                   Details                                   |  Type   |                                                      Example                                                      |
-| :-------------: | :-------------------------------------------------------------------------: | :-----: | :---------------------------------------------------------------------------------------------------------------: |
-|     `lines`     |       Text to display with lines separated by `;` and `+` for spaces        | string  |                                        `First+line;Second+line;Third+line`                                        |
-|    `height`     |             Height of the output SVG in pixels (default: `50`)              | integer |                                                Any positive number                                                |
-|     `width`     |             Width of the output SVG in pixels (default: `400`)              | integer |                                                Any positive number                                                |
-|     `size`      |                     Font size in pixels (default: `20`)                     | integer |                                                Any positive number                                                |
-|     `font`      |                     Font family (default: `monospace`)                      | string  |                                            Any font from Google Fonts                                             |
-|     `color`     |                    Color of the text (default: `36BCF7`)                    | string  |                                         Hex code without # (eg. `F724A9`)                                         |
-|  `background`   |             Background color of the text (default: `00000000`)              | string  |                                         Hex code without # (eg. `FEFF4C`)                                         |
-|    `center`     |    `true` to center text or `false` for left aligned (default: `false`)     | boolean |                                                 `true` or `false`                                                 |
-|    `vCenter`    |  `true` to center vertically or `false`(default) to align above the center  | boolean |                                                 `true` or `false`                                                 |
-|   `multiline`   |  `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |                                                 `true` or `false`                                                 |
-|   `duration`    | Duration of the printing of a single line in milliseconds (default: `5000`) | integer |                                                Any positive number                                                |
-|     `pause`     |     Duration of the pause between lines in milliseconds (default: `0`)      | integer |                                              Any non-negative number                                              |
-|    `repeat`     |  `true` to loop around to the first line after the last (default: `true`)   | boolean |                                                 `true` or `false`                                                 |
-|   `separator`   |     Separator used between lines in the lines parameter (default: `;`)      | string  |                                               `;`, `;;`, `/`, etc.                                                |
-| `letterSpacing` |                     Letter spacing (default: `normal`)                      | string  | Any css values for the [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) property |
+|    Parameter    |                                       Details                                       |  Type   |                                                      Example                                                      |
+| :-------------: | :---------------------------------------------------------------------------------: | :-----: | :---------------------------------------------------------------------------------------------------------------: |
+|     `lines`     |           Text to display with lines separated by `;` and `+` for spaces            | string  |                                        `First+line;Second+line;Third+line`                                        |
+|    `height`     |                 Height of the output SVG in pixels (default: `50`)                  | integer |                                                Any positive number                                                |
+|     `width`     |                 Width of the output SVG in pixels (default: `400`)                  | integer |                                                Any positive number                                                |
+|     `size`      |                         Font size in pixels (default: `20`)                         | integer |                                                Any positive number                                                |
+|     `font`      |                         Font family (default: `monospace`)                          | string  |                                            Any font from Google Fonts                                             |
+|     `color`     |                        Color of the text (default: `36BCF7`)                        | string  |                                         Hex code without # (eg. `F724A9`)                                         |
+|  `background`   |                 Background color of the text (default: `00000000`)                  | string  |                                         Hex code without # (eg. `FEFF4C`)                                         |
+|    `center`     |        `true` to center text or `false` for left aligned (default: `false`)         | boolean |                                                 `true` or `false`                                                 |
+|    `vCenter`    |      `true` to center vertically or `false`(default) to align above the center      | boolean |                                                 `true` or `false`                                                 |
+|   `multiline`   |      `true` to wrap lines or `false` to retype on one line (default: `false`)       | boolean |                                                 `true` or `false`                                                 |
+|   `duration`    |     Duration of the printing of a single line in milliseconds (default: `5000`)     | integer |                                                Any positive number                                                |
+|     `pause`     |         Duration of the pause between lines in milliseconds (default: `0`)          | integer |                                              Any non-negative number                                              |
+|    `repeat`     |      `true` to loop around to the first line after the last (default: `true`)       | boolean |                                                 `true` or `false`                                                 |
+|    `groups`     | Group lines so each group types sequentially then clears together. Sizes must sum to the number of non-empty lines (default: `none`) | string  |                                `2,1` (first 2 lines as group 1, next 1 as group 2)                                |
+|   `separator`   |         Separator used between lines in the lines parameter (default: `;`)          | string  |                                               `;`, `;;`, `/`, etc.                                                |
+| `letterSpacing` |                         Letter spacing (default: `normal`)                          | string  | Any css values for the [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) property |
 
 ## 📤 Deploying it on your own
 
diff --git a/src/demo/css/style.css b/src/demo/css/style.css
index bde0a621..9754a91b 100644
--- a/src/demo/css/style.css
+++ b/src/demo/css/style.css
@@ -101,7 +101,9 @@ h2 {
   border-radius: 6px;
   cursor: pointer;
   font-family: inherit;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
   transition: 0.2s ease-in-out;
 }
 
@@ -111,7 +113,9 @@ h2 {
 
 .btn:not(:disabled):hover {
   background-color: var(--blue-dark);
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  box-shadow:
+    0 3px 6px rgba(0, 0, 0, 0.16),
+    0 3px 6px rgba(0, 0, 0, 0.23);
 }
 
 .btn:disabled {
@@ -196,7 +200,9 @@ input:invalid {
 
 input:focus:invalid {
   outline: none;
-  box-shadow: 0 0 0 1px var(--blue-light), 0 0 0 3px var(--red);
+  box-shadow:
+    0 0 0 1px var(--blue-light),
+    0 0 0 3px var(--red);
 }
 
 .delete-line.btn {
@@ -213,7 +219,9 @@ input:focus:invalid {
 }
 
 .delete-line.btn:not(:disabled):hover {
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
+  box-shadow:
+    0 1px 3px rgb(0 0 0 / 12%),
+    0 1px 2px rgb(0 0 0 / 24%);
   background: #e4535314;
 }
 
@@ -221,6 +229,75 @@ input:focus:invalid {
   color: var(--stroke);
 }
 
+.group-divider {
+  grid-column: 1 / -1;
+  /* display:none gives a true zero grid footprint (no row, no surrounding gap);
+     opacity/height would still reserve space and leave large gaps between lines. */
+  display: none;
+  align-items: center;
+  gap: 6px;
+  height: 18px;
+  cursor: pointer;
+  user-select: none;
+  opacity: 0.4;
+  /* Reset: divider is a real <button> so it is keyboard focusable/activatable */
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  transition:
+    opacity 0.15s,
+    background 0.15s;
+}
+
+/* focus-within reveals the dividers before Tab order reaches them, so keyboard users can land on the buttons to create groups. */
+.lines:hover .group-divider,
+.lines:focus-within .group-divider,
+.group-divider.active {
+  display: flex;
+}
+
+.group-divider:hover,
+.group-divider:focus-visible {
+  opacity: 0.7;
+}
+
+.group-divider.active {
+  opacity: 1;
+}
+
+.group-divider::before,
+.group-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--stroke);
+  transition:
+    background 0.15s,
+    height 0.15s;
+}
+
+.group-divider.active::before,
+.group-divider.active::after {
+  height: 2px;
+  background: var(--blue-light);
+}
+
+.group-divider-label {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  color: var(--stroke);
+  transition: color 0.15s;
+}
+
+.group-divider.active .group-divider-label {
+  color: var(--blue-light);
+  font-weight: 600;
+}
+
 .add-line.btn {
   width: 100px;
   font-size: 1em;
diff --git a/src/demo/js/script.js b/src/demo/js/script.js
index d61faa10..d40105e9 100644
--- a/src/demo/js/script.js
+++ b/src/demo/js/script.js
@@ -78,6 +78,20 @@ const preview = {
       }
     }
     params.lines = mergeLines(lineInputs, params.separator);
+    // backend validates sum(groups) == line count, so skip empty inputs
+    const activeDividers = Array.from(document.querySelectorAll(".group-divider.active"));
+    if (activeDividers.length > 0) {
+      const breaks = activeDividers.map((d) => Number(d.dataset.dividerAfter)).sort((a, b) => a - b);
+      const segments = [0, ...breaks, lineInputs.length];
+      const groups = [];
+      for (let i = 0; i < segments.length - 1; i++) {
+        const count = lineInputs.slice(segments[i], segments[i + 1]).filter((el) => el.value.length > 0).length;
+        if (count > 0) groups.push(count);
+      }
+      if (groups.length > 1) {
+        params.groups = groups.join(",");
+      }
+    }
     return params;
   },
 
@@ -127,6 +141,28 @@ const preview = {
     return encodeURIComponent(str).replace(/%3B/g, ";").replace(/%20/g, "+");
   },
 
+  /**
+   * Create a clickable group divider element
+   * @param {number} afterIndex The line index this divider sits after
+   * @returns {HTMLElement} The divider element
+   */
+  createDivider(afterIndex) {
+    // Button element so the divider is keyboard focusable and activatable; type=button stops it submitting the form.
+    const divider = document.createElement("button");
+    divider.type = "button";
+    divider.className = "group-divider";
+    divider.dataset.dividerAfter = afterIndex;
+    divider.title = "Click to split into separate groups";
+    divider.setAttribute("aria-label", "Toggle group break");
+    divider.setAttribute("aria-pressed", "false");
+    divider.innerHTML = '<span class="group-divider-label">new group</span>';
+    divider.addEventListener("click", function () {
+      const active = this.classList.toggle("active");
+      this.setAttribute("aria-pressed", String(active));
+    });
+    return divider;
+  },
+
   /**
    * Add new line input fields
    * @param {number} count The number of lines to add
@@ -136,6 +172,9 @@ const preview = {
     for (let i = 0; i < count; i++) {
       const parent = document.querySelector(".lines");
       const index = parent.querySelectorAll("input").length + 1;
+      if (index > 1) {
+        parent.appendChild(this.createDivider(index - 1));
+      }
       // label
       const label = document.createElement("label");
       label.innerText = `Line ${index}`;
@@ -180,10 +219,34 @@ const preview = {
   removeLine(index) {
     index = Number(index);
     const parent = document.querySelector(".lines");
+    // A line has a divider on each side; if either was an active group boundary the
+    // boundary must survive when the two neighbouring lines merge into one gap.
+    const prevDivider = parent.querySelector(`.group-divider[data-divider-after="${index - 1}"]`);
+    const nextDivider = parent.querySelector(`.group-divider[data-divider-after="${index}"]`);
+    const boundarySurvives =
+      (prevDivider && prevDivider.classList.contains("active")) ||
+      (nextDivider && nextDivider.classList.contains("active"));
     // remove all elements for given property
     parent.querySelectorAll(`[data-index="${index}"]`).forEach((el) => {
       parent.removeChild(el);
     });
+    // Remove the divider before the deleted line (index-1); line 1 has no preceding
+    // divider, so remove the one after it instead.
+    const dividerToRemove = index > 1 ? index - 1 : 1;
+    const divider = parent.querySelector(`.group-divider[data-divider-after="${dividerToRemove}"]`);
+    if (divider) parent.removeChild(divider);
+    // divider positions shift down when a line is removed
+    parent.querySelectorAll(".group-divider").forEach((div) => {
+      const afterIndex = Number(div.dataset.dividerAfter);
+      if (afterIndex >= index) {
+        div.dataset.dividerAfter = afterIndex - 1;
+      }
+    });
+    // nextDivider has shifted into the merged gap; re-activate it if a boundary was lost.
+    if (index > 1 && nextDivider && boundarySurvives) {
+      nextDivider.classList.add("active");
+      nextDivider.setAttribute("aria-pressed", "true");
+    }
     // update index numbers
     const labels = parent.querySelectorAll("label");
     labels.forEach((label) => {
@@ -225,8 +288,8 @@ const preview = {
     // reset all inputs
     const inputs = document.querySelectorAll(".param");
     inputs.forEach((input) => {
-      let value = this.overrides[input.name] || this.defaults[input.name];
-      if (value) {
+      let value = this.overrides[input.name] ?? this.defaults[input.name];
+      if (value !== undefined) {
         if (["color", "background"].includes(input.name)) {
           input.jscolor.fromString(value);
         } else {
@@ -234,6 +297,10 @@ const preview = {
         }
       }
     });
+    document.querySelectorAll(".group-divider.active").forEach((d) => {
+      d.classList.remove("active");
+      d.setAttribute("aria-pressed", "false");
+    });
   },
 
   /**
@@ -267,12 +334,16 @@ const preview = {
   restore() {
     // get parameters from URL
     const urlParams = new URLSearchParams(window.location.search);
-    const params = { ...this.defaults, ...this.overrides, ...Object.fromEntries(urlParams) };
+    const params = {
+      ...this.defaults,
+      ...this.overrides,
+      ...Object.fromEntries(urlParams),
+    };
     // set all parameters
     const inputs = document.querySelectorAll(".param");
     inputs.forEach((input) => {
       let value = params[input.name];
-      if (value) {
+      if (value !== undefined) {
         if (["color", "background"].includes(input.name)) {
           input.jscolor.fromString(value);
         } else {
@@ -287,6 +358,20 @@ const preview = {
     lineInputs.forEach((line, index) => {
       document.querySelector(`#line-${index + 1}`).value = line;
     });
+    // groups param stores sizes, need to convert to cumulative positions for divider activation
+    const groupsParam = urlParams.get("groups");
+    if (groupsParam) {
+      const sizes = groupsParam.split(",").map(Number);
+      let pos = 0;
+      for (let i = 0; i < sizes.length - 1; i++) {
+        pos += sizes[i];
+        const divider = document.querySelector(`.group-divider[data-divider-after="${pos}"]`);
+        if (divider) {
+          divider.classList.add("active");
+          divider.setAttribute("aria-pressed", "true");
+        }
+      }
+    }
   },
 };
 
@@ -348,5 +433,5 @@ window.addEventListener(
     preview.restore(); // restore parameters
     preview.update(); // update preview
   },
-  false
+  false,
 );
diff --git a/src/models/RendererModel.php b/src/models/RendererModel.php
index ea2ee664..5ea39dbe 100644
--- a/src/models/RendererModel.php
+++ b/src/models/RendererModel.php
@@ -55,6 +55,9 @@ class RendererModel
     /** @var bool $random True = Sort lines in random order */
     public $random;
 
+    /** @var array<int>|null $groups Group sizes for grouped animation mode, null if disabled */
+    public $groups;
+
     /** @var string $fontCSS CSS required for displaying the selected font */
     public $fontCSS;
 
@@ -109,10 +112,35 @@ public function __construct($template, $params)
         $this->duration = $this->checkNumberPositive($params["duration"] ?? $this->DEFAULTS["duration"], "duration");
         $this->pause = $this->checkNumberNonNegative($params["pause"] ?? $this->DEFAULTS["pause"], "pause");
         $this->repeat = $this->checkBoolean($params["repeat"] ?? $this->DEFAULTS["repeat"]);
+        $this->groups = $this->checkGroups($params["groups"] ?? null, count($this->lines));
+        if ($this->random) {
+            $this->shuffleLines();
+        }
         $this->fontCSS = $this->fetchFontCSS($this->font, $this->weight, $params["lines"]);
         $this->letterSpacing = $this->checkLetterSpacing($params["letterSpacing"] ?? $this->DEFAULTS["letterSpacing"]);
     }
 
+    /**
+     * Shuffle lines, keeping groups together as units when groups are set
+     */
+    private function shuffleLines()
+    {
+        if ($this->groups !== null) {
+            // Shuffle whole groups so lines within each group stay together
+            $chunks = [];
+            $offset = 0;
+            foreach ($this->groups as $size) {
+                $chunks[] = array_slice($this->lines, $offset, $size);
+                $offset += $size;
+            }
+            shuffle($chunks);
+            $this->lines = array_merge(...$chunks);
+            $this->groups = array_map("count", $chunks);
+        } else {
+            shuffle($this->lines);
+        }
+    }
+
     /**
      * Validate lines and return array of string
      *
@@ -128,9 +156,6 @@ private function checkLines($lines)
             $lines = rtrim($lines, $this->separator);
         }
         $exploded = explode($this->separator, $lines);
-        if ($this->random) {
-            shuffle($exploded);
-        }
         // escape special characters to prevent code injection
         return array_map("htmlspecialchars", $exploded);
     }
@@ -268,4 +293,33 @@ private function checkLetterSpacing($letterSpacing)
         // Return the default letter spacing value if the input is invalid
         return $this->DEFAULTS["letterSpacing"];
     }
+
+    /**
+     * Validate and parse the groups parameter
+     *
+     * @param string|null $groups Comma-separated group sizes, e.g. "2,1"
+     * @param int $lineCount Total number of lines
+     * @return array<int>|null Parsed group sizes, or null if parameter not provided
+     */
+    private function checkGroups($groups, $lineCount)
+    {
+        if ($groups === null || $groups === "") {
+            return null;
+        }
+        $sizes = [];
+        foreach (explode(",", $groups) as $part) {
+            $n = intval(trim($part));
+            if ($n <= 0) {
+                throw new UnprocessableEntityException("Each group size must be a positive number.");
+            }
+            $sizes[] = $n;
+        }
+        $total = array_sum($sizes);
+        if ($total !== $lineCount) {
+            throw new UnprocessableEntityException(
+                "Sum of group sizes ($total) must equal number of lines ($lineCount)."
+            );
+        }
+        return $sizes;
+    }
 }
diff --git a/src/templates/main.php b/src/templates/main.php
index 3d423335..abff8587 100644
--- a/src/templates/main.php
+++ b/src/templates/main.php
@@ -8,26 +8,93 @@
     <?= $fontCSS ?>
 
     <?php $lastLineIndex = count($lines) - 1; ?>
+    <?php
+    // Pre-compute per-line group membership when groups param is provided
+    $groupInfo = [];
+    if ($groups !== null) {
+        $lineIdx = 0;
+        foreach ($groups as $gIdx => $gSize) {
+            $groupStartLine = $lineIdx;
+            for ($p = 0; $p < $gSize; $p++) {
+                $groupInfo[$lineIdx] = [
+                    "groupIndex" => $gIdx,
+                    "positionInGroup" => $p,
+                    "groupSize" => $gSize,
+                    "groupStartLine" => $groupStartLine,
+                    "lastLineInGroup" => $groupStartLine + $gSize - 1,
+                    "isFirstGroup" => $gIdx === 0,
+                ];
+                $lineIdx++;
+            }
+        }
+    }
+    ?>
     <?php for ($i = 0; $i <= $lastLineIndex; ++$i): ?>
         <path id='path<?= $i ?>'>
-            <?php if (!$multiline): ?>
-                <!-- Single line -->
+            <?php if ($groups !== null): ?>
+                <!-- Grouped lines: lines within a group type sequentially, all clear together -->
                 <?php
+                $info = $groupInfo[$i];
+                $p = $info["positionInGroup"];
+                $k = $info["groupSize"];
+                $groupStartLine = $info["groupStartLine"];
+                $lastLineInGroup = $info["lastLineInGroup"];
+
+                $lineHeight = $size + 5;
+                $yOffset = ($p + 1) * $lineHeight;
+                $emptyLine = "m0,$yOffset h0";
+                $fullLine = "m0,$yOffset h$width";
+
+                // Total time for this group: each line occupies one $duration slot, plus one $pause at the end
+                $groupDuration = $k * $duration + $pause;
+
+                // keyTimes: wait for turn, type, hold through group pause, clear simultaneously with group
+                $kt1 = ($p * $duration) / $groupDuration;
+                $kt2 = (($p + 0.8) * $duration) / $groupDuration;
+                $kt3 = (($k - 1 + 0.8) * $duration + $pause) / $groupDuration;
+                $keyTimes = ["0", $kt1, $kt2, $kt3, "1"];
+                $values = [$emptyLine, $emptyLine, $fullLine, $fullLine, $emptyLine];
+
+                // All lines in a group share the same begin trigger
+                if ($info["isFirstGroup"]) {
+                    $begin = $repeat ? "0s;d{$lastLineIndex}.end" : "0s";
+                } else {
+                    $prevGroupLastLine = $groupStartLine - 1;
+                    $begin = "d{$prevGroupLastLine}.end";
+                }
+
+                // Keep last group visible when repeat is disabled
+                $freeze = !$repeat && $lastLineInGroup === $lastLineIndex;
+                if ($freeze) {
+                    $values[4] = $fullLine;
+                }
+                ?>
+                <animate id='d<?= $i ?>' attributeName='d'
+                    begin='<?= $begin ?>'
+                    dur='<?= $groupDuration ?>ms'
+                    fill='<?= $freeze ? "freeze" : "remove" ?>'
+                    values='<?= implode(" ; ", $values) ?>'
+                    keyTimes='<?= implode(";", $keyTimes) ?>' />
+            <?php
                 // start after previous line
+                // if this is the first line, start at 0 seconds
+                // and also after the last line if repeat is true
+                // don't delete text after typing the last line if repeat is false
+                // empty line values
+                // keyTimes for the animation
+
+                elseif (!$multiline): ?>
+                <!-- Single line -->
+                <?php
                 $begin = "d" . ($i - 1) . ".end";
                 if ($i == 0) {
-                    // if this is the first line, start at 0 seconds
-                    // and also after the last line if repeat is true
                     $begin = $repeat ? "0s;d$lastLineIndex.end" : "0s";
                 }
-                // don't delete text after typing the last line if repeat is false
                 $freeze = !$repeat && $i == $lastLineIndex;
-                // empty line values
                 $yOffset = $height / 2;
                 $emptyLine = "m0,$yOffset h0";
                 $fullLine = "m0,$yOffset h$width";
                 $values = [$emptyLine, $fullLine, $fullLine, $freeze ? $fullLine : $emptyLine];
-                // keyTimes for the animation
                 $keyTimes = [
                     "0",
                     (0.8 * $duration) / ($duration + $pause),
diff --git a/src/views/RendererView.php b/src/views/RendererView.php
index 934ea40c..ee530e14 100644
--- a/src/views/RendererView.php
+++ b/src/views/RendererView.php
@@ -37,6 +37,7 @@ public function render()
             "width" => $this->model->width,
             "height" => $this->model->height,
             "multiline" => $this->model->multiline,
+            "groups" => $this->model->groups,
             "fontCSS" => $this->model->fontCSS,
             "duration" => $this->model->duration,
             "pause" => $this->model->pause,
diff --git a/tests/OptionsTest.php b/tests/OptionsTest.php
index 6b8411cd..d942e0a7 100644
--- a/tests/OptionsTest.php
+++ b/tests/OptionsTest.php
@@ -368,6 +368,59 @@ public function testRandom(): void
         $this->assertEquals(false, $model->random);
     }
 
+    /**
+     * Test valid groups parameter
+     */
+    public function testValidGroups(): void
+    {
+        $params = [
+            "lines" => "a;b;c",
+            "groups" => "2,1",
+        ];
+        $model = new RendererModel("src/templates/main.php", $params);
+        $this->assertEquals([2, 1], $model->groups);
+    }
+
+    /**
+     * Test groups not provided returns null
+     */
+    public function testGroupsNotProvided(): void
+    {
+        $params = [
+            "lines" => "a;b;c",
+        ];
+        $model = new RendererModel("src/templates/main.php", $params);
+        $this->assertNull($model->groups);
+    }
+
+    /**
+     * Test groups sum mismatch throws exception
+     */
+    public function testGroupsSumMismatch(): void
+    {
+        $this->expectException("InvalidArgumentException");
+        $this->expectExceptionMessage("Sum of group sizes (3) must equal number of lines (2).");
+        $params = [
+            "lines" => "a;b",
+            "groups" => "2,1",
+        ];
+        new RendererModel("src/templates/main.php", $params);
+    }
+
+    /**
+     * Test groups with a zero size throws exception
+     */
+    public function testGroupsZeroSize(): void
+    {
+        $this->expectException("InvalidArgumentException");
+        $this->expectExceptionMessage("Each group size must be a positive number.");
+        $params = [
+            "lines" => "a;b",
+            "groups" => "0,2",
+        ];
+        new RendererModel("src/templates/main.php", $params);
+    }
+
     /**
      * Test Letter Spacing
      */
diff --git a/tests/RendererTest.php b/tests/RendererTest.php
index 0e08a1c0..2e0bb6df 100644
--- a/tests/RendererTest.php
+++ b/tests/RendererTest.php
@@ -68,12 +68,12 @@ public function testMultilineCardRender(): void
         $this->assertStringContainsString("keyTimes='0;0;1;1'", $controller->render());
         $this->assertStringContainsString(
             "values='m0,25 h0 ; m0,25 h0 ; m0,25 h380 ; m0,25 h380'",
-            $controller->render()
+            $controller->render(),
         );
         $this->assertStringContainsString("keyTimes='0;0.5;1;1'", $controller->render());
         $this->assertStringContainsString(
             "values='m0,50 h0 ; m0,50 h0 ; m0,50 h380 ; m0,50 h380'",
-            $controller->render()
+            $controller->render(),
         );
     }
 
@@ -108,8 +108,8 @@ public function testLoadingGoogleFont(): void
             1,
             preg_match(
                 "/src: url\(data:font\/truetype;base64,[a-zA-Z0-9\/+=]+\) format\('truetype'\);/",
-                $controller->render()
-            )
+                $controller->render(),
+            ),
         );
         $this->assertStringContainsString("font-family='\"Roboto\", monospace'", $controller->render());
     }
@@ -251,7 +251,7 @@ public function testRepeatFalse(): void
         $this->assertStringContainsString("begin='0s'", $actualSVG);
         $this->assertStringContainsString(
             "begin='d2.end' dur='5000ms' fill='freeze' values='m0,25 h0 ; m0,25 h380 ; m0,25 h380 ; m0,25 h380'",
-            $actualSVG
+            $actualSVG,
         );
         $this->assertStringNotContainsString(";d3.end", $actualSVG);
     }
@@ -327,6 +327,120 @@ public function testRandom(): void
         }
     }
 
+    /**
+     * Test grouped lines animation: 3 lines with groups=2,1
+     * Group 0 (lines 0,1): both lines type sequentially and clear together.
+     * Group 1 (line 2): behaves like a single-line cycle.
+     */
+    public function testGroupedLinesRender(): void
+    {
+        $params = [
+            "lines" => "line1;line2;line3",
+            "groups" => "2,1",
+            "width" => "400",
+            "height" => "75",
+            "duration" => "5000",
+            "pause" => "0",
+        ];
+        $controller = new RendererController($params);
+        $svg = preg_replace("/\s+/", " ", $controller->render());
+
+        // Group 0, line 0 (p=0, k=2, groupDuration=10000): begins at 0s, types first
+        $this->assertStringContainsString("begin='0s;d2.end'", $svg);
+        $this->assertStringContainsString("dur='10000ms'", $svg);
+        $this->assertStringContainsString("keyTimes='0;0;0.4;0.9;1'", $svg);
+        $this->assertStringContainsString("values='m0,25 h0 ; m0,25 h0 ; m0,25 h400 ; m0,25 h400 ; m0,25 h0'", $svg);
+
+        // Group 0, line 1 (p=1, k=2, groupDuration=10000): same begin, waits for line 0
+        $this->assertStringContainsString("keyTimes='0;0.5;0.9;0.9;1'", $svg);
+        $this->assertStringContainsString("values='m0,50 h0 ; m0,50 h0 ; m0,50 h400 ; m0,50 h400 ; m0,50 h0'", $svg);
+
+        // Group 1, line 2 (k=1, groupDuration=5000): begins after group 0 ends
+        $this->assertStringContainsString("begin='d1.end'", $svg);
+        $this->assertStringContainsString("dur='5000ms'", $svg);
+        $this->assertStringContainsString("keyTimes='0;0;0.8;0.8;1'", $svg);
+        $this->assertStringContainsString("values='m0,25 h0 ; m0,25 h0 ; m0,25 h400 ; m0,25 h400 ; m0,25 h0'", $svg);
+    }
+
+    /**
+     * Test grouped lines with pause: pause applied once per group at the end
+     * groupDuration = k*duration + pause = 2*5000 + 1000 = 11000
+     */
+    public function testGroupedLinesPause(): void
+    {
+        $params = [
+            "lines" => "line1;line2",
+            "groups" => "2",
+            "width" => "400",
+            "height" => "60",
+            "duration" => "5000",
+            "pause" => "1000",
+        ];
+        $controller = new RendererController($params);
+        $svg = preg_replace("/\s+/", " ", $controller->render());
+
+        $this->assertStringContainsString("dur='11000ms'", $svg);
+        // Both lines share the same begin and dur, so both clear at the same moment
+        $this->assertEquals(2, substr_count($svg, "dur='11000ms'"));
+    }
+
+    /**
+     * Test grouped lines with repeat=false: last group stays visible
+     */
+    public function testGroupedLinesRepeatFalse(): void
+    {
+        $params = [
+            "lines" => "line1;line2",
+            "groups" => "1,1",
+            "width" => "400",
+            "height" => "50",
+            "duration" => "5000",
+            "pause" => "0",
+            "repeat" => "false",
+        ];
+        $controller = new RendererController($params);
+        $svg = preg_replace("/\s+/", " ", $controller->render());
+
+        // First group: begin at 0s with no repeat trigger
+        $this->assertStringContainsString("begin='0s'", $svg);
+        $this->assertStringNotContainsString(";d1.end", $svg);
+
+        // Last line should freeze (fill='freeze', last value is fullLine not emptyLine)
+        $this->assertStringContainsString("fill='freeze'", $svg);
+        $this->assertStringContainsString("values='m0,25 h0 ; m0,25 h0 ; m0,25 h400 ; m0,25 h400 ; m0,25 h400'", $svg);
+    }
+
+    /**
+     * Test random + groups: lines within each group must stay together
+     */
+    public function testRandomWithGroups(): void
+    {
+        // Seed the RNG so shuffle() is deterministic (this seed reorders the groups to c,d,a,b).
+        mt_srand(2);
+        $params = [
+            "lines" => "a;b;c;d",
+            "groups" => "2,2",
+            "random" => "true",
+        ];
+        $controller = new RendererController($params);
+        $svg = preg_replace("/\s+/", " ", $controller->render());
+
+        // Grouped animation must still be used
+        $this->assertStringContainsString("Grouped lines", $svg);
+
+        // Read back the rendered line order
+        preg_match_all("#> ([abcd]) </textPath>#", $svg, $matches);
+        $order = $matches[1];
+        $this->assertEqualsCanonicalizing(["a", "b", "c", "d"], $order, "All lines must survive the shuffle");
+
+        // Groups [a,b] and [c,d] must each stay together in original intra-group order;
+        // shuffling whole groups must never interleave their members.
+        $posA = array_search("a", $order);
+        $posC = array_search("c", $order);
+        $this->assertSame("b", $order[$posA + 1], "Group [a,b] was split apart by the shuffle");
+        $this->assertSame("d", $order[$posC + 1], "Group [c,d] was split apart by the shuffle");
+    }
+
     /**
      * Test Letter Spacing
      */