diff --git a/examples/bedtime-story-teller/README.md b/examples/bedtime-story-teller/README.md
new file mode 100644
index 0000000..3c3af93
--- /dev/null
+++ b/examples/bedtime-story-teller/README.md
@@ -0,0 +1,42 @@
+# Bedtime Story Teller Example
+
+## Description
+This example demonstrates how to build a bedtime story teller application using Arduino UNO Q. 
+The application shows how to use a cloud-based large language model (LLM) to generate a bedtime story based on user input.
+
+## Bricks Used
+
+The code detector example uses the following bricks:
+
+- `cloud_llm`: brick to interact with a cloud-based large language model (LLM) for generating story content.
+- `web_ui`: brick to create a web interface to get user input and display the generated story.
+
+## Hardware and Software Requirements
+
+### Hardware
+
+- Arduino UNO Q (x1)
+- USB camera (x1)
+- USB-C® to USB-A Cable (x1)
+- Personal computer with internet access
+
+### Software
+
+- Apps Lab IDE
+
+Note: You can run this example using your Arduino UNO Q as a Single Board Computer (SBC) using a [USB-C hub](https://store.arduino.cc/products/usb-c-to-hdmi-multiport-adapter-with-ethernet-and-usb-hub) with a mouse, keyboard and display attached.
+
+## How to Use the Example
+
+1. Run the app
+2. Open the App on your browser
+
+## How it Works
+
+Here is a brief explanation of the full-stack application:
+
+### 🔧 Backend (main.py)
+
+### 💻 Frontend (index.html + app.js)
+
+## Understanding the Code
diff --git a/examples/bedtime-story-teller/app.yaml b/examples/bedtime-story-teller/app.yaml
new file mode 100644
index 0000000..2b59f5b
--- /dev/null
+++ b/examples/bedtime-story-teller/app.yaml
@@ -0,0 +1,9 @@
+name: Bedtime story teller
+icon: 🏰
+description:
+  This example shows how to create a bedtime story teller using Arduino.
+  It uses a cloud-based language model to generate a story based on user input and shows the story on a web interface.
+
+bricks:
+  - arduino:cloud_llm
+  - arduino:web_ui
diff --git a/examples/bedtime-story-teller/assets/app.js b/examples/bedtime-story-teller/assets/app.js
new file mode 100644
index 0000000..506c8c4
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/app.js
@@ -0,0 +1,522 @@
+// SPDX-FileCopyrightText: Copyright (C) ARDUINO SRL (http://www.arduino.cc)
+//
+// SPDX-License-Identifier: MPL-2.0
+
+const socket = io(`http://${window.location.host}`);
+
+let generateStoryButtonOriginalHTML = ''; // To store the original content of the generate story button
+let storyBuffer = '';
+
+
+
+function initSocketIO() {
+    socket.on('prompt', (data) => {
+        const promptContainer = document.getElementById('prompt-container');
+        const promptDisplay = document.getElementById('prompt-display');
+        promptDisplay.innerHTML = data;
+        promptContainer.style.display = 'block';
+    });
+
+        socket.on('response', (data) => {
+
+            document.getElementById('story-container').style.display = 'flex';
+
+            storyBuffer += data;
+
+        });
+
+    
+
+        socket.on('stream_end', () => {
+
+            const storyResponse = document.getElementById('story-response');
+
+            storyResponse.innerHTML = storyBuffer;
+
+            
+
+            document.getElementById('loading-spinner').style.display = 'none';
+
+            const clearStoryButton = document.getElementById('clear-story-button');
+
+            clearStoryButton.style.display = 'block';
+
+            clearStoryButton.disabled = false;
+
+    
+
+            const generateStoryButton = document.querySelector('.generate-story-button');
+
+            if (generateStoryButton) {
+
+                generateStoryButton.disabled = false;
+
+                generateStoryButton.innerHTML = generateStoryButtonOriginalHTML; // Restore original content
+
+            }
+
+        });
+}
+
+function unlockAndOpenNext(currentContainer) {
+    const nextContainer = currentContainer.nextElementSibling;
+    if (nextContainer && nextContainer.classList.contains('parameter-container')) {
+        if (nextContainer.classList.contains('disabled')) {
+            nextContainer.classList.remove('disabled');
+            const content = nextContainer.querySelector('.parameter-content');
+            const arrow = nextContainer.querySelector('.arrow-icon');
+            if (content.style.display !== 'block') {
+                content.style.display = 'block';
+                arrow.classList.add('rotated');
+            }
+        }
+    }
+}
+
+function getRandomElement(elements) {
+    if (elements.length === 0) return null;
+    const randomIndex = Math.floor(Math.random() * elements.length);
+    return elements[randomIndex];
+}
+
+function setupChipSelection(container) {
+    const chips = container.querySelectorAll('.chip');
+    const selectedValue = container.querySelector('.selected-value');
+    chips.forEach(chip => {
+        chip.addEventListener('click', (event) => {
+            event.stopPropagation();
+            const alreadySelected = chip.classList.contains('selected');
+            chips.forEach(c => c.classList.remove('selected'));
+            chip.classList.add('selected');
+            if (selectedValue) {
+                selectedValue.innerHTML = chip.innerHTML;
+                selectedValue.style.display = 'inline-flex';
+            }
+            if (!alreadySelected) {
+                unlockAndOpenNext(container);
+            }
+
+            // Collapse the current container
+            const content = container.querySelector('.parameter-content');
+            const arrow = container.querySelector('.arrow-icon');
+            content.style.display = 'none';
+            arrow.classList.remove('rotated');
+
+        });
+    });
+}
+
+function setupStoryTypeSelection(container) {
+    const paragraphs = container.querySelectorAll('.story-type-paragraph');
+    paragraphs.forEach(paragraph => {
+        const chips = paragraph.querySelectorAll('.chip');
+        chips.forEach(chip => {
+            chip.addEventListener('click', (event) => {
+                event.stopPropagation();
+                const paragraphChips = paragraph.querySelectorAll('.chip');
+                paragraphChips.forEach(c => c.classList.remove('selected'));
+                chip.classList.add('selected');
+                updateStoryTypeHeader(container);
+                const selectedChips = container.querySelectorAll('.chip.selected');
+                if (selectedChips.length === paragraphs.length) {
+                    unlockAndOpenNext(container);
+                }
+            });
+        });
+    });
+}
+
+function updateStoryTypeHeader(container) {
+    const optionalText = container.querySelector('.optional-text');
+    const selectedChips = container.querySelectorAll('.chip.selected');
+    const content = container.querySelector('.parameter-content');
+    const isOpen = content.style.display === 'block';
+    optionalText.innerHTML = '';
+    if (selectedChips.length === 0) {
+        optionalText.textContent = '(optional)';
+        return;
+    }
+    if (isOpen) {
+        Array.from(selectedChips).forEach(chip => {
+            const pill = document.createElement('span');
+            pill.className = 'selection-pill';
+            pill.innerHTML = chip.innerHTML;
+            optionalText.appendChild(pill);
+        });
+    } else {
+        const firstTwo = Array.from(selectedChips).slice(0, 2);
+        firstTwo.forEach(chip => {
+            const pill = document.createElement('span');
+            pill.className = 'selection-pill';
+            pill.innerHTML = chip.innerHTML;
+            optionalText.appendChild(pill);
+        });
+        const remaining = selectedChips.length - 2;
+        if (remaining > 0) {
+            const plusSpan = document.createElement('span');
+            plusSpan.className = 'plus-x';
+            plusSpan.style.display = 'inline-block';
+            plusSpan.textContent = `+${remaining}`;
+            optionalText.appendChild(plusSpan);
+        }
+    }
+}
+
+function checkCharactersAndUnlockNext(charactersContainer) {
+    const characterGroups = charactersContainer.querySelectorAll('.character-input-group');
+    let atLeastOneCharacterEntered = false;
+    characterGroups.forEach(group => {
+        const nameInput = group.querySelector('.character-name');
+        const roleSelect = group.querySelector('.character-role');
+        if (nameInput.value.trim() !== '' && roleSelect.value !== '') {
+            atLeastOneCharacterEntered = true;
+        }
+    });
+    const generateButton = document.querySelector('.generate-story-button');
+    if (atLeastOneCharacterEntered) {
+        unlockAndOpenNext(charactersContainer);
+        generateButton.style.display = 'flex';
+    } else {
+        generateButton.style.display = 'none';
+    }
+}
+
+function gatherDataAndGenerateStory() {
+    document.querySelectorAll('.parameter-container').forEach(container => {
+        const content = container.querySelector('.parameter-content');
+        if (content && content.style.display === 'block') {
+            content.style.display = 'none';
+            const arrow = container.querySelector('.arrow-icon');
+            if (arrow) {
+                arrow.classList.remove('rotated');
+            }
+        }
+    });
+
+    const age = document.querySelector('.parameter-container:nth-child(1) .chip.selected')?.textContent.trim() || 'any';
+    const theme = document.querySelector('.parameter-container:nth-child(2) .chip.selected')?.textContent.trim() || 'any';
+    const storyTypeContainer = document.querySelector('.parameter-container:nth-child(3)');
+    const tone = storyTypeContainer.querySelector('.story-type-paragraph:nth-child(1) .chip.selected')?.textContent.trim() || 'any';
+    const endingType = storyTypeContainer.querySelector('.story-type-paragraph:nth-child(2) .chip.selected')?.textContent.trim() || 'any';
+    const narrativeStructure = storyTypeContainer.querySelector('.story-type-paragraph:nth-child(3) .chip.selected')?.textContent.trim() || 'any';
+    const duration = storyTypeContainer.querySelector('.story-type-paragraph:nth-child(4) .chip.selected')?.textContent.trim() || 'any';
+    
+    const characters = [];
+    const characterGroups = document.querySelectorAll('.character-input-group');
+    characterGroups.forEach(group => {
+        const name = group.querySelector('.character-name').value.trim();
+        const role = group.querySelector('.character-role').value;
+        const description = group.querySelector('.character-description').value.trim();
+        if (name && role) {
+            characters.push({ name, role, description });
+        }
+    });
+
+    const other = document.querySelector('.other-textarea').value.trim();
+
+    const storyData = {
+        age,
+        theme,
+        tone,
+        endingType,
+        narrativeStructure,
+        duration,
+        characters,
+        other,
+    };
+
+    generateStory(storyData);
+}
+
+function generateStory(data) {
+    document.querySelector('.story-output-placeholder').style.display = 'none';
+    const responseArea = document.getElementById('story-response-area');
+    responseArea.style.display = 'flex';
+    document.getElementById('prompt-container').style.display = 'none';
+    document.getElementById('prompt-display').textContent = '';
+    document.getElementById('story-container').style.display = 'none';
+    document.getElementById('story-response').innerHTML = ''; // Use innerHTML to clear
+    storyBuffer = ''; // Reset buffer
+    document.getElementById('loading-spinner').style.display = 'block'; // Show the general loading spinner
+
+    const generateStoryButton = document.querySelector('.generate-story-button');
+    if (generateStoryButton) {
+        generateStoryButton.disabled = true;
+        // Append the spinner instead of replacing innerHTML
+        generateStoryButton.innerHTML += '<div class="button-spinner spinner"></div>';
+    }
+    
+    document.getElementById('clear-story-button').style.display = 'none';
+    socket.emit('generate_story', data);
+}
+
+function resetStoryView() {
+    document.querySelector('.story-output-placeholder').style.display = 'flex';
+    const responseArea = document.getElementById('story-response-area');
+    responseArea.style.display = 'none';
+    document.getElementById('prompt-container').style.display = 'none';
+    document.getElementById('story-container').style.display = 'none';
+    document.getElementById('prompt-display').innerHTML = '';
+    document.getElementById('story-response').textContent = '';
+
+    // Reset parameter selections
+    document.querySelectorAll('.chip.selected').forEach(chip => {
+        chip.classList.remove('selected');
+    });
+
+    document.querySelectorAll('.selected-value').forEach(selectedValue => {
+        selectedValue.innerHTML = '';
+        selectedValue.style.display = 'none';
+    });
+
+    // Reset Story type optional text
+    document.querySelectorAll('.parameter-container:nth-child(3) .optional-text').forEach(optionalText => {
+        optionalText.textContent = '(optional)';
+    });
+
+    // Clear character inputs and remove extra groups
+    const characterInputGroups = document.querySelectorAll('.character-input-group');
+    characterInputGroups.forEach((group, index) => {
+        if (index === 0) { // Only clear the first group, others will be removed
+            group.querySelector('.character-name').value = '';
+            group.querySelector('.character-role').selectedIndex = 0;
+            group.querySelector('.character-description').value = '';
+            group.querySelector('.delete-character-button').style.display = 'none';
+        } else {
+            group.remove();
+        }
+    });
+    document.querySelector('.add-character-button').style.display = 'block'; // Ensure add character button is visible
+
+    // Clear "Other" textarea
+    const otherTextarea = document.querySelector('.other-textarea');
+    if (otherTextarea) {
+        otherTextarea.value = '';
+        const charCounter = document.querySelector('.char-counter');
+        if (charCounter) {
+            charCounter.textContent = `0 / ${otherTextarea.maxLength}`;
+        }
+    }
+
+    // Restore "Generate story" button to original state
+    const generateStoryButton = document.querySelector('.generate-story-button');
+    if (generateStoryButton) {
+        generateStoryButton.style.display = 'none'; // Keep hidden if no chars, will be set to flex by checkCharactersAndUnlockNext
+        generateStoryButton.disabled = false;
+        generateStoryButton.innerHTML = generateStoryButtonOriginalHTML;
+    }
+
+    // Reset parameter containers state
+    const parameterContainers = document.querySelectorAll('.parameter-container');
+    parameterContainers.forEach((container, index) => {
+        const content = container.querySelector('.parameter-content');
+        const arrow = container.querySelector('.arrow-icon');
+
+        if (index === 0) { // Age container
+            content.style.display = 'block';
+            arrow.classList.add('rotated');
+            container.classList.remove('disabled');
+        } else {
+            if (container.id !== 'prompt-container') {
+                container.classList.add('disabled');
+            }
+            content.style.display = 'none';
+            arrow.classList.remove('rotated');
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    initSocketIO();
+
+    const generateStoryButton = document.querySelector('.generate-story-button');
+    if (generateStoryButton) {
+        generateStoryButtonOriginalHTML = generateStoryButton.innerHTML; // Store original content
+    }
+
+    const parameterContainers = document.querySelectorAll('.parameter-container');
+
+    parameterContainers.forEach((container, index) => {
+        if (index === 0) {
+            const content = container.querySelector('.parameter-content');
+            const arrow = container.querySelector('.arrow-icon');
+            content.style.display = 'block';
+            arrow.classList.add('rotated');
+        } else {
+            if (container.id !== 'prompt-container') {
+                container.classList.add('disabled');
+            }
+        }
+    });
+
+    parameterContainers.forEach(container => {
+        const title = container.querySelector('.parameter-title').textContent;
+        const header = container.querySelector('.parameter-header');
+        header.addEventListener('click', () => {
+            if (container.classList.contains('disabled')) return;
+            const content = container.querySelector('.parameter-content');
+            const arrow = container.querySelector('.arrow-icon');
+            arrow.classList.toggle('rotated');
+            if (content.style.display === 'block') {
+                content.style.display = 'none';
+            } else {
+                content.style.display = 'block';
+            }
+            if (title === 'Story type') {
+                updateStoryTypeHeader(container);
+            } else if (title === 'Other') {
+                const textarea = container.querySelector('.other-textarea');
+                const charCounter = container.querySelector('.char-counter');
+                const maxLength = textarea.maxLength;
+                textarea.addEventListener('input', () => {
+                    const currentLength = textarea.value.length;
+                    charCounter.textContent = `${currentLength} / ${maxLength}`;
+                });
+            }
+        });
+
+        if (title === 'Story type') {
+            setupStoryTypeSelection(container);
+        } else if (title === 'Characters') {
+            const charactersList = container.querySelector('.characters-list');
+            charactersList.addEventListener('input', () => {
+                checkCharactersAndUnlockNext(container);
+            });
+            container.querySelector('.add-character-button').addEventListener('click', () => {
+                checkCharactersAndUnlockNext(container);
+            });
+        } else if (title === 'Other') {
+            container.querySelector('.other-textarea').addEventListener('input', () => unlockAndOpenNext(container), { once: true });
+        } else {
+            setupChipSelection(container);
+        }
+    });
+
+    const addCharacterButton = document.querySelector('.add-character-button');
+    const charactersList = document.querySelector('.characters-list');
+    const characterInputGroup = document.querySelector('.character-input-group');
+    addCharacterButton.addEventListener('click', () => {
+        const characterGroups = document.querySelectorAll('.character-input-group');
+        if (characterGroups.length < 5) {
+            const newCharacterGroup = characterInputGroup.cloneNode(true);
+            newCharacterGroup.querySelector('.character-name').value = '';
+            newCharacterGroup.querySelector('.character-role').selectedIndex = 0;
+            newCharacterGroup.querySelector('.character-description').value = '';
+            const deleteButton = newCharacterGroup.querySelector('.delete-character-button');
+            deleteButton.style.display = 'block';
+            deleteButton.addEventListener('click', () => {
+                newCharacterGroup.remove();
+                if (document.querySelectorAll('.character-input-group').length < 5) {
+                    addCharacterButton.style.display = 'block';
+                }
+                checkCharactersAndUnlockNext(document.querySelector('.parameter-container:nth-child(4)'));
+            });
+            charactersList.appendChild(newCharacterGroup);
+            if (document.querySelectorAll('.character-input-group').length === 5) {
+                addCharacterButton.style.display = 'none';
+            }
+        }
+    });
+
+    document.querySelector('.generate-story-button').addEventListener('click', gatherDataAndGenerateStory);
+
+    
+    const modal = document.getElementById('new-story-modal');
+    const clearButton = document.getElementById('clear-story-button');
+    const closeButton = document.querySelector('.close-button');
+    const confirmButton = document.getElementById('confirm-new-story-button');
+
+    clearButton.addEventListener('click', () => {
+        modal.style.display = 'flex';
+    });
+
+    closeButton.addEventListener('click', () => {
+        modal.style.display = 'none';
+    });
+
+    confirmButton.addEventListener('click', () => {
+        resetStoryView();
+        modal.style.display = 'none';
+    });
+
+    window.addEventListener('click', (event) => {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+        }
+    });
+
+    document.getElementById('copy-story-button').addEventListener('click', () => {
+        const storyText = document.getElementById('story-response').innerText;
+        const copyButton = document.getElementById('copy-story-button');
+        const originalHTML = copyButton.innerHTML;
+        const textarea = document.createElement('textarea');
+        textarea.value = storyText;
+        document.body.appendChild(textarea);
+        textarea.select();
+        try {
+            document.execCommand('copy');
+            copyButton.textContent = 'Copied!';
+            copyButton.disabled = true;
+        } catch (err) {
+            console.error('Could not copy text: ', err);
+        }
+        document.body.removeChild(textarea);
+
+        setTimeout(() => {
+            copyButton.innerHTML = originalHTML;
+            copyButton.disabled = false;
+        }, 2000);
+    });
+
+    document.getElementById('generate-randomly-button').addEventListener('click', () => {
+        // Age
+        const ageChips = document.querySelectorAll('.parameter-container:nth-child(1) .chip');
+        const randomAgeChip = getRandomElement(ageChips);
+        const age = randomAgeChip ? randomAgeChip.textContent.trim() : 'any';
+
+        // Theme
+        const themeChips = document.querySelectorAll('.parameter-container:nth-child(2) .chip');
+        const randomThemeChip = getRandomElement(themeChips);
+        const theme = randomThemeChip ? randomThemeChip.textContent.trim() : 'any';
+
+        // Story Type
+        const storyTypeContainer = document.querySelector('.parameter-container:nth-child(3)');
+        
+        // Tone
+        const toneChips = storyTypeContainer.querySelectorAll('.story-type-paragraph:nth-child(1) .chip');
+        const randomToneChip = getRandomElement(toneChips);
+        const tone = randomToneChip ? randomToneChip.textContent.trim() : 'any';
+
+        // Ending type
+        const endingTypeChips = storyTypeContainer.querySelectorAll('.story-type-paragraph:nth-child(2) .chip');
+        const randomEndingTypeChip = getRandomElement(endingTypeChips);
+        const endingType = randomEndingTypeChip ? randomEndingTypeChip.textContent.trim() : 'any';
+        
+        // Narrative structure
+        const narrativeStructureChips = storyTypeContainer.querySelectorAll('.story-type-paragraph:nth-child(3) .chip');
+        const randomNarrativeStructureChip = getRandomElement(narrativeStructureChips);
+        const narrativeStructure = randomNarrativeStructureChip ? randomNarrativeStructureChip.textContent.trim() : 'any';
+
+        // Duration
+        const durationChips = storyTypeContainer.querySelectorAll('.story-type-paragraph:nth-child(4) .chip');
+        const randomDurationChip = getRandomElement(durationChips);
+        const duration = randomDurationChip ? randomDurationChip.textContent.trim() : 'any';
+
+        // Characters and Other will be empty for random generation.
+        const characters = [];
+        const other = '';
+
+        const storyData = {
+            age,
+            theme,
+            tone,
+            endingType,
+            narrativeStructure,
+            duration,
+            characters,
+            other,
+        };
+
+        generateStory(storyData);
+    });
+});
diff --git a/examples/bedtime-story-teller/assets/fonts/Open Sans/OFL.txt b/examples/bedtime-story-teller/assets/fonts/Open Sans/OFL.txt
new file mode 100644
index 0000000..4fc6170
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/fonts/Open Sans/OFL.txt	
@@ -0,0 +1,93 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/examples/bedtime-story-teller/assets/fonts/Open Sans/OpenSans-VariableFont_wdth,wght.ttf b/examples/bedtime-story-teller/assets/fonts/Open Sans/OpenSans-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..548c15f
Binary files /dev/null and b/examples/bedtime-story-teller/assets/fonts/Open Sans/OpenSans-VariableFont_wdth,wght.ttf differ
diff --git a/examples/bedtime-story-teller/assets/fonts/Roboto/OFL.txt b/examples/bedtime-story-teller/assets/fonts/Roboto/OFL.txt
new file mode 100644
index 0000000..68f7a96
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/fonts/Roboto/OFL.txt
@@ -0,0 +1,91 @@
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/fonts/Roboto/RobotoMono-VariableFont_wght.ttf b/examples/bedtime-story-teller/assets/fonts/Roboto/RobotoMono-VariableFont_wght.ttf
new file mode 100644
index 0000000..3a2d704
Binary files /dev/null and b/examples/bedtime-story-teller/assets/fonts/Roboto/RobotoMono-VariableFont_wght.ttf differ
diff --git a/examples/bedtime-story-teller/assets/fonts/fonts.css b/examples/bedtime-story-teller/assets/fonts/fonts.css
new file mode 100644
index 0000000..86cf716
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/fonts/fonts.css
@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: Copyright (C) ARDUINO SRL (http://www.arduino.cc)
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-display: swap;
+    src: url('Roboto/RobotoMono-VariableFont_wght.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-display: swap;
+    src: url('Open Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
+}
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/animal.svg b/examples/bedtime-story-teller/assets/img/animal.svg
new file mode 100644
index 0000000..ff00044
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/animal.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8.64055 13.4164C8.64055 13.4164 7.89726 13.9308 7.82726 14.0208C7.75726 14.1097 7.72727 14.2142 7.86281 14.2553C7.99836 14.2964 8.21391 14.2397 8.21391 14.2397C8.21391 14.2397 8.10613 14.3997 8.35945 14.4586C8.52945 14.4975 8.85943 14.3253 8.85943 14.3253C8.85943 14.3253 8.80499 14.4775 9.03164 14.5086C9.35829 14.5541 9.92271 13.8531 10.0383 13.6342C10.1538 13.4153 10.1005 13.2275 10.1005 13.2275L8.64055 13.4164Z" fill="#ADADB7"/>
+  <path d="M6.68512 12.9541C6.68512 12.9541 5.77295 13.5007 5.69962 13.5318C5.62629 13.563 5.34186 13.7218 5.44963 13.8963C5.53296 14.0318 5.85628 13.9274 5.85628 13.9274C5.85628 13.9274 5.78628 14.0796 5.97071 14.1674C6.15626 14.2551 6.54402 14.0418 6.54402 14.0418C6.54402 14.0418 6.50069 14.2318 6.7529 14.2607C7.07621 14.2985 7.79617 13.3119 7.79617 13.3119L6.68512 12.9541Z" fill="#ADADB7"/>
+  <path d="M10.3296 5.15246C10.3296 5.15246 10.4551 3.197 9.50072 2.29039C8.54633 1.38377 7.37306 1.48709 7.01308 1.58153C6.6531 1.67486 6.02646 1.90152 5.58426 2.54037C4.99985 3.38477 5.23984 4.17695 4.96874 4.68804C4.75542 5.09135 4.16545 6.24684 4.07212 7.07569C3.97879 7.90453 3.91546 9.47445 3.96213 10.0322C4.00768 10.5777 4.0299 11.0588 4.32211 11.5021C4.49654 11.7677 4.8443 11.7732 4.96319 11.6277C5.03318 11.5421 5.00985 11.4166 5.00985 11.4166C5.00985 11.4166 5.48538 12.1254 5.67759 12.3632C5.99091 12.7487 6.64087 13.3698 7.70082 13.552C9.09852 13.792 11.3917 13.052 11.3917 13.052C11.3917 13.052 11.5884 13.1854 11.9006 13.2009C12.0595 13.2087 12.245 13.052 12.2217 12.8954C12.1984 12.7387 12.0184 12.5198 11.9795 12.4343C11.9406 12.3487 12.0606 9.95554 11.6851 8.32896C11.3095 6.70237 10.6107 5.37133 10.3296 5.15246Z" fill="#4D4D4D"/>
+  <path d="M5.30862 5.15195C5.30862 5.15195 4.63088 5.85635 4.56866 6.82519C4.51644 7.63959 4.51088 9.12396 4.98086 10.4539C5.45083 11.7838 6.3419 12.8838 7.63961 13.1437C9.04398 13.426 10.6006 12.9304 10.6483 12.9149C10.695 12.8993 10.3672 12.5504 10.1373 12.206C9.96282 11.9438 9.73616 11.3616 9.73616 11.3616C9.73616 11.3616 9.75172 11.8105 9.46284 11.846C9.24285 11.8738 8.93065 11.6583 8.69622 11.1416C8.46178 10.625 8.14291 9.22284 8.05514 8.06846C7.97737 7.03629 8.08292 6.37188 8.18847 6.0819C8.2518 5.90746 8.37957 5.78858 8.37957 5.78858C8.37957 5.78858 8.7351 6.22078 9.29841 6.07412C9.8406 5.93302 9.97615 5.3386 9.88282 4.85418C9.7706 4.27533 9.53839 3.6498 8.75177 3.82202C7.85848 4.01756 8.16958 5.17083 8.16958 5.17083C8.16958 5.17083 7.53183 5.69081 6.64077 5.59748C5.74637 5.50415 5.30862 5.15195 5.30862 5.15195Z" fill="url(#paint0_linear_2523_6115)"/>
+  <path d="M6.12193 2.90538C6.12193 2.90538 6.01416 2.50318 5.74084 2.45207C5.2142 2.35318 4.48424 2.69761 4.18759 2.87982C3.9476 3.02759 3.61873 3.34869 3.71873 3.50534C3.81872 3.662 4.3598 3.5109 4.82422 3.58867C5.14532 3.64312 5.59085 3.77644 5.77862 3.77089C5.92861 3.76644 6.12304 3.50979 6.1486 3.3898C6.17415 3.2698 6.17415 3.05648 6.12193 2.90538Z" fill="#ADADB7"/>
+  <path d="M6.14741 2.94629C6.14741 2.94629 5.7041 3.13961 4.77082 3.20183C4.37529 3.2285 3.70754 3.42071 3.70754 3.42071C3.70754 3.42071 3.63977 3.48848 3.74976 3.54626C3.85976 3.60403 4.41751 3.44515 4.76082 3.42626C5.31857 3.39515 6.34074 3.32182 6.34074 3.32182L6.14741 2.94629Z" fill="#4D4D4D"/>
+  <path d="M7.97281 3.33275C7.98281 3.57162 7.7506 3.77606 7.54172 3.74161C7.2784 3.69717 7.14952 3.44607 7.17729 3.1972C7.20507 2.94832 7.43172 2.81722 7.64171 2.84055C7.85281 2.86277 7.96281 3.08276 7.97281 3.33275Z" fill="#000409"/>
+  <defs>
+    <linearGradient id="paint0_linear_2523_6115" x1="7.06208" y1="12.638" x2="8.60614" y2="4.69449" gradientUnits="userSpaceOnUse">
+      <stop offset="0.3618" stop-color="white"/>
+      <stop offset="0.4122" stop-color="#FFFAEF"/>
+      <stop offset="0.5102" stop-color="#FFEDC7"/>
+      <stop offset="0.6459" stop-color="#FFD985"/>
+      <stop offset="0.7882" stop-color="#FFC139"/>
+      <stop offset="0.8168" stop-color="#FFB92E"/>
+      <stop offset="0.9438" stop-color="#FF9700"/>
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/arrow-right.svg b/examples/bedtime-story-teller/assets/img/arrow-right.svg
new file mode 100644
index 0000000..dd86a0d
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="4" height="7" viewBox="0 0 4 7" fill="none">
+<path d="M0.502899 7.00205C0.437096 7.00243 0.371865 6.98981 0.310946 6.96493C0.250027 6.94005 0.194619 6.90339 0.147899 6.85705C0.101035 6.81056 0.0638379 6.75526 0.0384536 6.69433C0.0130692 6.6334 0 6.56805 0 6.50205C0 6.43604 0.0130692 6.37069 0.0384536 6.30976C0.0638379 6.24883 0.101035 6.19353 0.147899 6.14705L2.7979 3.50205L0.147899 0.857046C0.0537473 0.762894 0.000853539 0.635196 0.000853539 0.502046C0.000853539 0.368895 0.0537473 0.241197 0.147899 0.147046C0.242051 0.0528938 0.369748 0 0.502899 0C0.63605 0 0.763747 0.0528938 0.857899 0.147046L3.8579 3.14705C3.90476 3.19353 3.94196 3.24883 3.96735 3.30976C3.99273 3.37069 4.0058 3.43604 4.0058 3.50205C4.0058 3.56805 3.99273 3.6334 3.96735 3.69433C3.94196 3.75526 3.90476 3.81056 3.8579 3.85705L0.857899 6.85705C0.811179 6.90339 0.755771 6.94005 0.694852 6.96493C0.633934 6.98981 0.568702 7.00243 0.502899 7.00205Z" fill="#2C353A"/>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/bear.svg b/examples/bedtime-story-teller/assets/img/bear.svg
new file mode 100644
index 0000000..df6e530
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/bear.svg
@@ -0,0 +1,18 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5517 11.8556C13.2561 11.3022 12.6993 11.1677 12.0904 11.2933C12.0792 11.2955 12.0659 11.2989 12.0526 11.3033C12.227 10.9888 12.3615 10.681 12.3826 10.1131C12.4326 8.7152 11.8559 8.02844 11.258 7.5206C10.019 6.46825 6.43743 6.81496 6.38187 6.81718C5.92181 6.83607 5.28062 7.11722 4.9328 7.42392C4.16604 8.09178 3.57485 9.03301 3.53151 10.0709C3.50818 10.4465 3.57374 10.8921 3.75265 11.2522C3.27148 11.1922 2.76253 11.3577 2.44471 11.9245C2.1869 12.3834 2.26024 12.9457 2.54028 13.4636C2.91921 14.1659 3.78043 14.8293 4.63276 14.6326C5.49731 14.4337 6.24741 13.5769 7.01084 13.1246C7.06529 13.0924 7.12974 13.0813 7.19308 13.088C7.6687 13.1424 8.33767 13.1424 8.75772 13.0969C8.84551 13.088 8.93219 13.1169 8.99442 13.178C9.07332 13.2558 9.15222 13.3291 9.18111 13.3558C9.66006 13.7969 10.2079 14.2737 10.8169 14.517C11.8481 14.9282 12.8716 14.4681 13.4261 13.4836C13.7172 12.9657 13.845 12.4034 13.5517 11.8556Z" fill="#A65F3E"/>
+<path d="M5.99441 9.93942C5.92775 9.57832 5.88108 9.12168 6.10774 8.79836L5.94219 8.47949C5.52221 8.90503 5.5911 9.57388 5.66998 9.9983C5.67998 10.055 5.84331 10.8905 5.75331 11.2193C5.64998 11.5971 5.31445 11.9004 4.93224 11.9782C4.72559 11.6482 4.4156 11.4116 4.0734 11.2738C3.74009 11.1394 3.26122 11.176 2.98901 11.3749C3.28233 11.2938 3.62454 11.3127 3.91119 11.4493C4.31006 11.6382 4.55671 11.8971 4.78225 12.4471C4.85669 12.6282 4.91558 12.917 5.08779 12.867C5.18668 12.8393 5.26445 12.7393 5.22667 12.5804C5.18668 12.4126 5.12668 12.2982 5.12668 12.2982C5.12668 12.2982 5.73554 12.1937 6.07218 11.306C6.2444 10.8505 6.00552 9.99497 5.99441 9.93942Z" fill="#703B26"/>
+<path opacity="0.7" d="M2.68939 12.7287C2.69272 12.5254 2.84604 12.2298 3.03714 12.1587C3.49268 11.9865 3.98821 12.1943 4.26264 12.8176C4.48929 13.3331 4.51151 13.8742 4.41485 14.0197C4.27152 14.2342 4.06265 14.1997 3.91821 14.1742C3.65489 14.1275 3.42601 13.9686 3.21936 13.7975C3.00937 13.6231 2.6805 13.2698 2.68939 12.7287Z" fill="#F29657"/>
+<path d="M10.3191 12.5748C10.2702 12.5748 10.2202 12.5704 10.1702 12.5615C9.72027 12.4782 9.45251 12.0304 9.42029 11.6304C9.38807 11.226 9.54362 10.8427 9.69916 10.5216C9.72694 10.4638 10.0158 9.93384 10.0936 9.57386C10.2102 9.03056 10.1125 8.53503 10.078 8.31393C10.0436 8.09172 10.2125 8.12949 10.2858 8.28837C10.4658 8.67835 10.498 9.22388 10.4169 9.64052C10.3425 10.0216 10.0236 10.6083 9.99581 10.666C9.85916 10.9482 9.7225 11.2793 9.74805 11.6049C9.76916 11.8726 9.94471 12.1848 10.2291 12.2371C10.5369 12.2937 10.7836 12.1826 11.0435 11.9448L11.3235 12.0515C11.118 12.2404 10.7502 12.5748 10.3191 12.5748Z" fill="#703B26"/>
+<path d="M11.05 12.8401C11.0178 12.9001 10.9722 12.9468 10.9067 12.9456C10.8056 12.9445 10.7411 12.8256 10.74 12.7234C10.7356 11.919 11.6166 11.1846 12.4277 11.2502C11.7933 11.3857 11.3244 11.9035 11.0978 12.7223C11.0867 12.7612 11.07 12.8023 11.05 12.8401Z" fill="#703B26"/>
+<path opacity="0.7" d="M13.308 12.7199C13.3014 12.5165 13.1436 12.2243 12.9525 12.1543C12.4947 11.9888 12.0014 12.2032 11.737 12.831C11.5181 13.3498 11.5426 13.8265 11.5726 13.9276C11.6659 14.2398 11.9581 14.2098 12.1014 14.182C12.3636 14.1309 12.5903 13.9687 12.7947 13.7954C13.0025 13.6198 13.3247 13.2621 13.308 12.7199Z" fill="#F29657"/>
+<path d="M6.89165 9.81428L6.64722 9.54874C7.0472 9.16765 7.59272 8.64323 7.68716 8.16992L8.01048 8.23436C7.90493 8.76545 7.45273 9.40652 7.0472 9.81761C7.00386 9.86206 6.93276 9.85983 6.89165 9.81428Z" fill="#703B26"/>
+<path d="M8.82149 8.12738C9.49368 7.98073 9.98476 7.56852 10.0159 7.05411L6.35829 6.83301C6.33496 7.22521 6.58383 7.59075 6.99159 7.84184C6.48384 7.92851 6.13719 8.0585 5.98942 8.12072C5.90831 8.15516 5.85498 8.23405 5.85498 8.32293C5.85609 8.74402 6.30607 9.60397 6.62938 9.65619C6.94937 9.70841 7.67044 8.77957 7.93598 8.37959C7.93598 9.00178 8.02931 10.1017 8.21597 10.1884C8.59484 10.3628 9.79477 9.71397 9.83033 9.3751C9.8581 9.10956 9.32591 8.58958 8.82149 8.12738Z" fill="#FFCA28"/>
+<path d="M12.0219 3.05545C11.9941 2.57983 11.6774 2.15533 11.2296 1.9942C10.8662 1.86419 10.5028 1.90975 10.2106 2.07421C10.0772 2.14867 9.9172 2.16089 9.7794 2.09199C9.56604 1.98531 9.19599 1.84085 8.66926 1.77417C8.14475 1.7075 7.73915 1.76528 7.49578 1.82307C7.33799 1.86085 7.17574 1.80529 7.06128 1.68972C6.84126 1.4708 6.53789 1.33301 6.19229 1.33301C5.62222 1.33301 5.1166 1.74862 5.00325 2.30757C4.93213 2.6554 5.01547 2.99322 5.20216 3.25547C5.36441 3.4855 5.39663 3.78665 5.29217 4.0489C5.18661 4.31338 4.98547 4.89457 4.98991 5.21683C5.00658 6.62256 6.28563 7.35154 7.97695 7.56601C9.66828 7.78049 11.1807 7.25264 11.4652 5.79801C11.5296 5.46908 11.5118 5.03903 11.4552 4.71677C11.4085 4.45118 11.4963 4.1767 11.6841 3.98223C11.9086 3.74887 12.0441 3.42327 12.0219 3.05545Z" fill="#A65F3E"/>
+<path d="M5.48326 2.63153C5.52881 2.2771 5.83657 2.02489 6.17322 2.06711C6.30099 2.08378 6.6843 2.23377 6.5532 2.43376C6.52876 2.47043 6.49209 2.49598 6.45654 2.52153C6.21766 2.69486 6.00323 2.90596 5.82546 3.14706C5.79324 3.1915 5.74435 3.2415 5.69658 3.22039C5.5277 3.14817 5.46326 2.79374 5.48326 2.63153Z" fill="#874D36"/>
+<path d="M11.4772 3.39171C11.5227 3.03729 11.2861 2.71508 10.9506 2.67286C10.8228 2.65619 10.4139 2.70619 10.4917 2.93285C10.5061 2.97507 10.535 3.0084 10.5628 3.04284C10.7506 3.2695 10.905 3.52837 11.0172 3.80725C11.0372 3.85835 11.0717 3.91946 11.1239 3.91057C11.305 3.88169 11.4561 3.55504 11.4772 3.39171Z" fill="#874D36"/>
+<path opacity="0.7" d="M7.77225 4.5744C7.44449 4.95104 7.19783 5.16437 6.96562 5.49657C6.5712 6.06099 6.84563 7.04204 7.96335 7.18759C8.7422 7.2887 9.41327 6.91983 9.4266 6.17431C9.43549 5.70211 9.01885 5.07215 8.8033 4.6655C8.53443 4.16108 8.11334 4.18219 7.77225 4.5744Z" fill="#F29657"/>
+<path opacity="0.55" d="M7.22365 4.45104C7.26501 4.16067 7.09859 3.89679 6.85196 3.86167C6.60532 3.82654 6.37185 4.03346 6.3305 4.32384C6.28914 4.61421 6.45555 4.87809 6.70219 4.91321C6.94883 4.94834 7.18229 4.74142 7.22365 4.45104Z" fill="black"/>
+<path opacity="0.55" d="M10.2888 4.84069C10.3302 4.55032 10.1638 4.28644 9.91714 4.25132C9.67051 4.21619 9.43704 4.42311 9.39568 4.71349C9.35433 5.00386 9.52074 5.26773 9.76738 5.30286C10.014 5.33799 10.2475 5.13107 10.2888 4.84069Z" fill="black"/>
+<path opacity="0.55" fill-rule="evenodd" clip-rule="evenodd" d="M7.24445 6.00722C7.31554 5.98314 7.39269 6.02126 7.41677 6.09235C7.50041 6.33929 7.75665 6.50676 8.05663 6.54543C8.35636 6.58407 8.65014 6.48756 8.79867 6.26764C8.84068 6.20544 8.92516 6.18907 8.98736 6.23109C9.04956 6.2731 9.06593 6.35758 9.02392 6.41978C8.80025 6.75095 8.38795 6.86221 8.02188 6.81502C7.65607 6.76786 7.28679 6.55591 7.15932 6.17954C7.13524 6.10845 7.17335 6.0313 7.24445 6.00722Z" fill="black"/>
+<path opacity="0.55" d="M8.41995 6.20328C8.15218 6.26217 7.87997 6.2155 7.70109 5.99107C7.56666 5.8233 7.42778 5.5422 7.61888 5.34333C7.88997 5.06556 8.56438 5.14889 8.80881 5.42443C8.9477 5.65886 8.67327 6.14995 8.41995 6.20328Z" fill="black"/>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/book.svg b/examples/bedtime-story-teller/assets/img/book.svg
new file mode 100644
index 0000000..af66630
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/book.svg
@@ -0,0 +1,107 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M8.69452 12.0891L14.0896 12.6024C14.5975 12.6513 14.7275 12.368 14.7275 12.128L14.7219 11.8369L8.08667 10.9014C8.08667 11.2336 8.3567 12.0891 8.69452 12.0891Z" fill="#C62828"/>
+<path d="M7.30739 12.0892L1.91227 12.6025C1.40443 12.6514 1.27441 12.3681 1.27441 12.1281L1.27997 11.837L7.91524 10.9004C7.91524 11.2337 7.64521 12.0892 7.30739 12.0892Z" fill="#C62828"/>
+<path d="M7.1107 11.8362L6.26837 11.9107L1.71558 12.3507C1.47111 12.3507 1.27441 12.1562 1.27441 11.9162L1.51556 4.55306C1.51556 4.31303 1.71336 4.11856 1.95672 4.11856L7.1107 3.63184C7.44852 3.63184 7.723 3.90187 7.723 4.23413V11.235C7.723 11.5662 7.44963 11.8362 7.1107 11.8362Z" fill="#F44336"/>
+<path d="M8.89086 11.8354L9.73986 11.9098L14.286 12.3488C14.5305 12.3488 14.7271 12.1543 14.7271 11.9143L14.486 4.55111C14.486 4.31108 14.2882 4.11661 14.0448 4.11661L8.89086 3.62988C8.55304 3.62988 8.27856 3.89992 8.27856 4.23218V11.2331C8.27856 11.5653 8.55193 11.8354 8.89086 11.8354Z" fill="#F44336"/>
+<path d="M9.63905 10.1875H6.36367L6.26367 11.913L7.28584 12.0085C7.28584 12.0085 7.50472 12.5552 8.00025 12.5552C8.49578 12.5552 8.71465 12.0085 8.71465 12.0085L9.73682 11.913L9.63905 10.1875Z" fill="#424242"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.78732 11.8291L9.73949 11.9113L9.7156 12.1881L8.76343 12.1058L8.78732 11.8291Z" fill="#616161"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.23779 12.1058L6.28561 12.1881L6.26172 11.9113L7.21389 11.8291L7.23779 12.1058Z" fill="#616161"/>
+<path d="M14.1851 4.53599L13.7406 3.9248L8.00098 10.4478L2.26137 3.9248L1.81687 4.53599L1.75464 11.798C1.75464 11.798 2.93479 11.9458 4.51165 11.7858C5.88516 11.6469 6.5319 11.2913 6.99085 11.3835C7.54203 11.4946 7.64204 11.8336 7.65982 11.8914C7.70983 12.0514 7.80873 12.1758 8.00098 12.1758C8.19322 12.1758 8.27879 12.1092 8.33768 11.9114C8.35546 11.8536 8.45992 11.4958 9.0111 11.3846C9.47005 11.2924 10.1168 11.648 11.4903 11.7869C13.0672 11.9469 14.2473 11.7991 14.2473 11.7991L14.1851 4.53599Z" fill="#94C6D6"/>
+<path d="M8.79649 11.8292C8.67206 11.8181 8.55762 11.8947 8.51762 12.0136C8.45762 12.1947 8.31763 12.4314 8.00098 12.4314C7.681 12.4314 7.53989 12.1936 7.47878 12.0125C7.43879 11.8959 7.32657 11.8203 7.20324 11.8303L7.15991 11.8336L7.16102 11.8692C7.16102 12.3325 7.53656 12.708 7.99987 12.708C8.46318 12.708 8.83871 12.3325 8.83871 11.8692C8.83871 11.8581 8.8376 11.8325 8.8376 11.8325L8.79649 11.8292Z" fill="#616161"/>
+<path d="M13.5906 11.0971L13.6084 8.16504H14.2161L14.2472 11.7971C14.2472 11.7971 13.7639 11.6093 13.5906 11.0971Z" fill="url(#paint0_linear_2527_14239)"/>
+<path d="M13.6186 9.38867L13.5908 11.0986C13.5908 11.0986 12.2618 11.0297 10.1448 10.6631C8.76022 10.4231 8.00124 11.1919 8.00124 11.1919L7.98901 9.38867H13.6186Z" fill="url(#paint1_linear_2527_14239)"/>
+<path d="M2.38354 9.38867L2.41133 11.0986C2.41133 11.0986 3.74038 11.0297 5.85731 10.6631C7.24193 10.4231 8.00091 11.1919 8.00091 11.1919L7.98869 9.38867H2.38354Z" fill="url(#paint2_linear_2527_14239)"/>
+<path d="M2.41127 11.0971L2.39349 8.16504H1.78464L1.75464 11.7971C1.75464 11.7971 2.23684 11.6093 2.41127 11.0971Z" fill="url(#paint3_linear_2527_14239)"/>
+<path d="M13.7403 3.92488C13.7403 3.92488 10.7911 3.37037 9.49647 3.29814C8.27854 3.23035 8.02851 3.85043 8.00406 3.92488H7.99961C7.97406 3.85043 7.72402 3.23146 6.50609 3.29814C5.21149 3.37037 2.26223 3.92488 2.26223 3.92488L2.1311 11.0813C2.1311 11.0813 5.64265 10.3457 6.49276 10.4413C7.34287 10.5368 8.00073 11.1925 8.00073 11.1925V11.1914V11.1925C8.00073 11.1925 8.6597 10.5368 9.5098 10.4413C10.3599 10.3457 13.8715 11.0813 13.8715 11.0813L13.7403 3.92488Z" fill="#F5F5F5"/>
+<path opacity="0.26" d="M6.84728 3.29883L6.24731 10.4331C6.34175 10.4308 6.42508 10.4331 6.49175 10.4408C7.34059 10.5353 8.00056 11.192 8.00056 11.192L7.98167 3.92446C7.98167 3.92446 7.83723 3.3555 6.84728 3.29883Z" fill="#94C6D6"/>
+<g opacity="0.5">
+<path opacity="0.5" d="M3.70226 4.24219C3.40227 4.29441 3.15673 4.33885 3.01674 4.36329C3.01674 4.43218 3.01674 4.50773 3.01562 4.58884C3.13895 4.56661 3.39005 4.52106 3.70226 4.46662V4.24219Z" fill="#757575"/>
+<g opacity="0.5">
+<path opacity="0.5" d="M6.40698 3.88477V4.10587C6.99917 4.10476 7.32693 4.25364 7.43471 4.31364C7.43471 4.22142 7.43582 4.13921 7.43582 4.06699C7.25249 3.98477 6.91696 3.88366 6.40698 3.88477Z" fill="#757575"/>
+<path opacity="0.5" d="M5.92423 3.91211C5.44315 3.961 4.77318 4.06321 4.18433 4.16099V4.38653C4.76874 4.28987 5.43982 4.18654 5.92423 4.13543V3.91211Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M4.74122 4.87207C4.02348 4.98318 3.30352 5.11206 3.01465 5.16428C3.01465 5.23761 3.01465 5.31316 3.01465 5.38982C3.26575 5.34427 4.00237 5.21094 4.74122 5.0965V4.87207Z" fill="#757575"/>
+<path opacity="0.5" d="M6.07779 4.69876C5.84336 4.71764 5.54448 4.75542 5.22339 4.79986V5.0243C5.55115 4.97763 5.8578 4.93986 6.09556 4.91986C6.8933 4.8543 7.31439 5.04985 7.43216 5.11651C7.43216 5.03096 7.43216 4.94874 7.43216 4.86875C7.21439 4.77209 6.77775 4.64098 6.07779 4.69876Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M3.82127 5.82227C3.47018 5.88226 3.17686 5.93448 3.01465 5.96448C3.01465 6.03892 3.01465 6.11447 3.01465 6.19002C3.1602 6.16336 3.45796 6.11003 3.82127 6.04781V5.82227Z" fill="#757575"/>
+<path opacity="0.5" d="M7.43243 5.67205C7.21578 5.57428 6.77802 5.44095 6.0714 5.49984C5.6192 5.5365 4.92701 5.63983 4.30371 5.74205V5.96759C4.93257 5.86426 5.63475 5.75982 6.09028 5.72205C6.90135 5.65539 7.32355 5.85871 7.43243 5.92204C7.43243 5.83649 7.43243 5.75427 7.43243 5.67205Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M7.43352 6.47494C7.21909 6.37716 6.77911 6.2405 6.06693 6.29939C5.99471 6.30494 5.91693 6.31272 5.83472 6.32161V6.54493C5.92471 6.53493 6.00804 6.52716 6.08581 6.52049C6.91244 6.45271 7.33464 6.66493 7.43463 6.72492C7.43352 6.64159 7.43352 6.55826 7.43352 6.47494Z" fill="#757575"/>
+<path opacity="0.5" d="M5.35081 6.38184C4.48197 6.50072 3.39981 6.69293 3.01538 6.76293C3.01538 6.83848 3.01538 6.91292 3.01538 6.98847C3.35425 6.92625 4.46197 6.72737 5.35081 6.60516V6.38184Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M4.02866 7.38672C3.59202 7.46005 3.21426 7.52782 3.01538 7.56338C3.01538 7.63893 3.01538 7.71448 3.01538 7.78892C3.19537 7.75559 3.57868 7.6867 4.02866 7.61115V7.38672Z" fill="#757575"/>
+<path opacity="0.5" d="M7.43379 7.27978C7.22158 7.18201 6.77938 7.04202 6.06053 7.1009C5.66055 7.13423 5.07391 7.21756 4.51172 7.30756V7.53199C5.07947 7.44088 5.6761 7.35533 6.0783 7.322C6.92604 7.25201 7.34935 7.47866 7.43379 7.52977C7.43379 7.44644 7.43379 7.36311 7.43379 7.27978Z" fill="#757575"/>
+</g>
+<path opacity="0.5" d="M7.43661 8.88808C7.2344 8.79142 6.79665 8.64587 6.07446 8.70032V8.92364C6.99553 8.8492 7.41328 9.12474 7.43661 9.1414C7.43661 9.05919 7.43661 8.97475 7.43661 8.88808Z" fill="#757575"/>
+<g opacity="0.5">
+<path opacity="0.5" d="M3.82111 9.02051C3.47891 9.07939 3.18781 9.1305 3.01782 9.16161C3.01782 9.23938 3.01782 9.31383 3.01782 9.38716C3.17448 9.35827 3.4678 9.30605 3.82111 9.24494V9.02051Z" fill="#757575"/>
+<path opacity="0.5" d="M4.30322 8.94097V9.16651C4.73431 9.09651 5.19762 9.02541 5.59204 8.97541V8.75098C5.19984 8.79986 4.73653 8.86986 4.30322 8.94097Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M5.07487 9.62109C4.27935 9.73664 3.38496 9.89552 3.01831 9.96219C3.01831 10.0444 3.01831 10.12 3.01831 10.1877C3.35052 10.1266 4.26158 9.96441 5.07487 9.84553V9.62109Z" fill="#757575"/>
+<path opacity="0.5" d="M7.43727 9.69218C7.23617 9.59441 6.78842 9.4422 6.04179 9.5033C5.90069 9.51441 5.73625 9.5333 5.55737 9.55552V9.77885C5.74292 9.75551 5.91402 9.73663 6.05957 9.7244C7.01063 9.64552 7.42839 9.94106 7.43283 9.94328L7.43838 9.93661C7.43838 9.85995 7.43839 9.77885 7.43727 9.69218Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M4.90959 8.04492C4.15185 8.15825 3.34856 8.30158 3.01636 8.36268C3.01636 8.43935 3.01636 8.51379 3.01636 8.58823C3.31412 8.53379 4.13297 8.38713 4.90959 8.26935V8.04492Z" fill="#757575"/>
+<path opacity="0.5" d="M7.43518 8.08306C7.2263 7.98529 6.78299 7.84085 6.05414 7.90085C5.86749 7.9164 5.63972 7.94307 5.39307 7.9764V8.20083C5.6475 8.16639 5.88193 8.13862 6.07303 8.12306C6.94854 8.05084 7.37185 8.29416 7.43629 8.33527C7.43518 8.25305 7.43518 8.16861 7.43518 8.08306Z" fill="#757575"/>
+</g>
+</g>
+<g opacity="0.5">
+<g opacity="0.5">
+<path opacity="0.5" d="M10.7133 4.19025C11.6332 4.31247 12.8354 4.53024 13.162 4.58912C13.162 4.5069 13.162 4.43246 13.1609 4.36358C12.7787 4.29358 11.6088 4.0847 10.7122 3.96582V4.19025H10.7133Z" fill="#757575"/>
+<path opacity="0.5" d="M10.2299 3.91028C10.1821 3.90584 10.1366 3.90139 10.0932 3.89806C9.3966 3.84029 8.96106 3.97028 8.74219 4.06694C8.74219 4.13916 8.7433 4.22249 8.7433 4.3136C8.86774 4.24471 9.28883 4.05472 10.0755 4.11916C10.1243 4.12361 10.1766 4.12805 10.2299 4.1336V3.91028Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M12.2642 5.23225C12.6719 5.30224 13.0097 5.36224 13.1641 5.39113C13.1641 5.31335 13.1641 5.23891 13.1641 5.16558C12.9897 5.13336 12.6586 5.07448 12.2642 5.00781V5.23225Z" fill="#757575"/>
+<path opacity="0.5" d="M11.7811 4.92652C11.1801 4.82986 10.5312 4.73431 10.1001 4.69876C9.40015 4.64098 8.96351 4.77209 8.74463 4.86875C8.74463 4.94874 8.74463 5.03096 8.74463 5.11651C8.8624 5.04985 9.28349 4.8543 10.0812 4.91986C10.5156 4.95541 11.1745 5.05318 11.78 5.15096V4.92652H11.7811Z" fill="#757575"/>
+</g>
+<path opacity="0.5" d="M11.6885 5.71094V5.93537C12.334 6.0387 12.9351 6.14758 13.164 6.1898C13.164 6.11314 13.164 6.0387 13.164 5.96426C12.9051 5.91759 12.3151 5.81204 11.6885 5.71094Z" fill="#757575"/>
+<g opacity="0.5">
+<path opacity="0.5" d="M10.7125 6.36801C10.4892 6.33912 10.2826 6.31468 10.1115 6.30134C9.39928 6.24246 8.95931 6.37912 8.74487 6.47689C8.74487 6.56022 8.74487 6.64355 8.74487 6.72688C8.84487 6.66799 9.26818 6.45467 10.0937 6.52244C10.2692 6.53689 10.4826 6.56133 10.7125 6.59244V6.36801Z" fill="#757575"/>
+<path opacity="0.5" d="M11.1963 6.43555V6.65998C12.0018 6.77997 12.8695 6.93663 13.1629 6.98996C13.1629 6.91441 13.1629 6.83886 13.1629 6.76442C12.8318 6.70331 11.9818 6.55221 11.1963 6.43555Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M11.2934 7.24978C10.8545 7.18312 10.429 7.12646 10.1179 7.1009C9.39793 7.04202 8.95573 7.18201 8.74463 7.27978C8.74463 7.36311 8.74463 7.44755 8.74463 7.53088C8.82907 7.47866 9.25238 7.25312 10.1001 7.32311C10.4145 7.34867 10.849 7.40755 11.2945 7.47533V7.24978H11.2934Z" fill="#757575"/>
+<path opacity="0.5" d="M11.7764 7.32617V7.55172C12.3808 7.64949 12.9341 7.74948 13.1618 7.79059C13.1618 7.71615 13.1618 7.6406 13.1618 7.56505C12.9085 7.51838 12.3641 7.42061 11.7764 7.32617Z" fill="#757575"/>
+</g>
+<path opacity="0.5" d="M12.5613 8.25684V8.48238C12.8235 8.52793 13.0379 8.56682 13.1601 8.58904C13.1601 8.5146 13.1601 8.43905 13.1601 8.3635C13.0268 8.33905 12.8157 8.30128 12.5613 8.25684Z" fill="#757575"/>
+<g opacity="0.5">
+<path opacity="0.5" d="M10.811 8.77955C10.5565 8.74511 10.321 8.71733 10.1299 8.70178C9.39215 8.64067 8.94662 8.78955 8.74219 8.88732C8.74219 8.97398 8.74219 9.05842 8.74219 9.14064C8.76552 9.12398 9.1855 8.84621 10.1132 8.92288C10.3088 8.93843 10.551 8.96732 10.8132 9.00287V8.77955H10.811Z" fill="#757575"/>
+<path opacity="0.5" d="M11.2932 8.84863V9.07307C12.0576 9.18862 12.8598 9.33305 13.1598 9.38749C13.1598 9.31416 13.1598 9.23861 13.1598 9.16195C12.8265 9.10195 12.0398 8.96196 11.2932 8.84863Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M11.6879 9.71002C11.1246 9.62003 10.5357 9.53559 10.1357 9.50226C9.38798 9.44115 8.94133 9.59447 8.74023 9.69114C8.74023 9.7778 8.74023 9.8589 8.74023 9.93557L8.74579 9.94223C8.74912 9.94001 9.16688 9.64447 10.1191 9.72336C10.5224 9.75669 11.1212 9.84335 11.6901 9.93446V9.71002H11.6879Z" fill="#757575"/>
+<path opacity="0.5" d="M12.1716 9.79004V10.0156C12.6038 10.0878 12.9727 10.1545 13.1594 10.1889C13.1594 10.1211 13.1594 10.0456 13.1594 9.96336C12.956 9.92559 12.5916 9.86004 12.1716 9.79004Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M10.1043 7.89957C9.3866 7.84291 8.94884 7.98624 8.74219 8.0829C8.74219 8.16734 8.74219 8.25178 8.74219 8.33511C8.80663 8.294 9.22883 8.05068 10.1043 8.12289V7.89957Z" fill="#757575"/>
+<path opacity="0.5" d="M10.5881 7.9502V8.17352C11.0459 8.23129 11.5959 8.31795 12.0792 8.39795V8.17241C11.5925 8.09241 11.0426 8.00686 10.5881 7.9502Z" fill="#757575"/>
+</g>
+<g opacity="0.5">
+<path opacity="0.5" d="M9.74802 5.48633C9.25027 5.48966 8.92251 5.59188 8.74585 5.67187C8.74585 5.75409 8.74585 5.83631 8.74585 5.92075C8.83918 5.86742 9.15805 5.71298 9.74802 5.70743V5.48633Z" fill="#757575"/>
+<path opacity="0.5" d="M10.2305 5.51074V5.73406C10.5071 5.76184 10.8504 5.8085 11.2049 5.86072V5.63629C10.8493 5.58296 10.5071 5.53741 10.2305 5.51074Z" fill="#757575"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2527_14239" x1="13.9176" y1="10.6894" x2="13.9451" y2="8.76703" gradientUnits="userSpaceOnUse">
+<stop offset="0.2665" stop-color="#82AEC0"/>
+<stop offset="1" stop-color="#82AEC0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2527_14239" x1="8.65876" y1="10.2898" x2="13.4162" y2="10.2898" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2F7889"/>
+<stop offset="1" stop-color="#82AEC0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2527_14239" x1="7.33186" y1="10.2898" x2="2.58506" y2="10.2898" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2F7889"/>
+<stop offset="1" stop-color="#82AEC0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2527_14239" x1="2.08381" y1="10.6894" x2="2.05634" y2="8.76702" gradientUnits="userSpaceOnUse">
+<stop offset="0.2665" stop-color="#82AEC0"/>
+<stop offset="1" stop-color="#82AEC0" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/castle.svg b/examples/bedtime-story-teller/assets/img/castle.svg
new file mode 100644
index 0000000..548f42c
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/castle.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M5.02648 10.0547L2.15663 10.2936C2.15663 10.2936 2.13219 14.3467 2.12108 14.4656C2.10997 14.5844 2.15663 14.7044 2.29996 14.7044C2.44328 14.7044 13.6694 14.6567 13.7893 14.6567C13.9093 14.6567 13.9927 14.4889 13.9927 14.3456C13.9927 14.2022 13.9927 10.5436 13.9927 10.5436L12.1161 10.0658L5.02648 10.0547Z" fill="#ACA299"/>
+  <path d="M10.2806 12.8044V12.4022C10.2806 12.4022 11.0006 12.3978 11.0095 12.4089C11.0184 12.42 11.0162 12.8067 11.0162 12.8067L10.2806 12.8044Z" fill="#D8D0C5"/>
+  <path d="M6.24076 14.689C6.24076 14.689 6.19854 12.9546 6.43963 12.3602C6.69629 11.728 7.05849 11.3869 7.3007 11.1236C7.54402 10.8592 7.954 10.4981 8.08621 10.4847C8.22065 10.4703 8.64952 10.8803 8.98283 11.228C9.29948 11.558 9.69835 11.9091 9.86501 12.4991C9.98945 12.9391 9.95056 14.6734 9.95056 14.6734L6.24076 14.689Z" fill="#6F6A67"/>
+  <path d="M8.08722 10.9014C8.02389 10.9014 6.94728 11.788 6.7484 12.5879C6.58952 13.2301 6.62063 14.6878 6.62063 14.6878L9.61714 14.6745C9.61714 14.6745 9.70046 12.9924 9.48825 12.4768C9.15605 11.6691 8.15055 10.9014 8.08722 10.9014Z" fill="#89847E"/>
+  <path d="M7.07642 14.6872C7.07642 14.6872 7.05864 13.0172 7.06642 12.7961C7.0742 12.5739 7.38307 11.9095 8.11192 11.9251C8.84077 11.9406 9.15742 12.5506 9.1652 12.7961C9.17298 13.0417 9.1652 14.6772 9.1652 14.6772L7.07642 14.6872Z" fill="#6E4D42"/>
+  <path d="M8.72063 12.1123C8.72063 12.1123 8.79063 12.1601 8.84285 12.2079C8.8884 12.2501 8.93507 12.3056 8.93507 12.3056L8.93618 14.6777L8.70508 14.6788L8.72063 12.1123Z" fill="#8F6D61"/>
+  <path d="M7.35853 14.6864L7.60408 14.6853V12.041C7.60408 12.041 7.50408 12.0988 7.45408 12.141C7.40631 12.181 7.35742 12.2299 7.35742 12.2299C7.35742 12.2299 7.35853 14.6853 7.35853 14.6864Z" fill="#8F6D61"/>
+  <path d="M8.02846 14.6828L8.02734 11.9263C8.02734 11.9263 8.1029 11.9229 8.13734 11.9241C8.184 11.9263 8.24511 11.9352 8.24511 11.9352L8.26289 14.6817L8.02846 14.6828Z" fill="#8F6D61"/>
+  <path d="M10.1238 4.31445H5.83069V9.90305H10.1238V4.31445Z" fill="#ACA299"/>
+  <path d="M4.21777 10.3072H11.8118L11.4941 9.13611C11.4941 9.13611 9.96525 9.125 9.88636 9.125C9.82081 9.125 9.77859 9.17944 9.7797 9.26055C9.78081 9.31943 9.77859 9.71053 9.77859 9.71053L8.75976 9.7083C8.75976 9.7083 8.75976 9.34166 8.75976 9.28277C8.75976 9.18055 8.69754 9.12833 8.58421 9.13167C8.49644 9.13389 7.59759 9.12833 7.52871 9.13167C7.4276 9.13611 7.41649 9.19611 7.41649 9.29055C7.41649 9.38499 7.41316 9.69053 7.41316 9.69053L6.31322 9.68941C6.31322 9.68941 6.30989 9.32721 6.30989 9.2761C6.30989 9.22611 6.28433 9.16278 6.15989 9.15722C6.03434 9.15055 4.57442 9.15722 4.57442 9.15722L4.21777 10.3072Z" fill="#E5DDD2"/>
+  <path d="M7.32082 5.43895C7.32082 5.43895 7.32082 6.62667 7.32082 6.66444C7.32082 6.77666 7.27749 6.86332 7.44526 6.8511C7.54526 6.84332 8.65186 6.8511 8.65186 6.8511C8.65186 6.8511 8.65186 5.5945 8.6452 5.45117C8.63853 5.30785 8.47743 4.87232 7.97968 4.87898C7.48193 4.88565 7.32638 5.24563 7.32082 5.43895Z" fill="#2F2F2F"/>
+  <path d="M5.82973 6.79883L10.1239 6.80327V7.27103L9.54065 7.51657L8.98068 7.96432L8.27182 7.49768C8.27182 7.49768 7.76852 7.49768 7.74296 7.51657C7.71852 7.53546 7.18299 8.0021 7.18299 8.0021L6.58636 7.51101L5.83084 7.33547C5.83084 7.33436 5.8264 6.80327 5.82973 6.79883Z" fill="#D9D1C6"/>
+  <path d="M5.82971 7.63752C5.82971 7.63752 6.30302 7.57641 6.5619 7.68418C6.86077 7.80862 7.15853 8.25637 7.20297 8.25637C7.29741 8.25526 7.49185 7.67862 8.06737 7.63418C8.63956 7.58974 8.86955 8.31192 8.99399 8.31859C9.08843 8.32303 9.30731 7.80084 9.56618 7.65974C9.83506 7.51308 10.1239 7.50974 10.1239 7.50974V7.26865C10.1239 7.26865 9.7695 7.2342 9.47952 7.36753C9.15287 7.51863 9.03732 7.82195 8.98288 7.82528C8.94399 7.82751 8.65845 7.33531 8.04293 7.35531C7.46407 7.3742 7.24964 7.79417 7.20186 7.79528C7.18075 7.7964 6.94965 7.51974 6.66189 7.40531C6.31969 7.26865 5.83082 7.33198 5.83082 7.33198L5.82971 7.63752Z" fill="#6F6B67"/>
+  <path d="M1.44336 7.81344C1.44336 7.81344 1.48336 8.25675 1.5178 8.56118C1.55224 8.86561 1.61779 9.21892 1.61779 9.21892L3.27771 9.60224L4.65208 9.20004C4.65208 9.20004 4.70652 8.81339 4.72652 8.43452C4.74541 8.07454 4.73763 7.819 4.72763 7.81122C4.69763 7.78678 3.14549 7.0957 3.14549 7.0957L1.44336 7.81344Z" fill="#ACA299"/>
+  <path d="M1.61658 9.21602L4.65308 9.19824C4.65308 9.19824 4.5842 9.66933 4.5442 9.87154C4.5042 10.0726 4.41198 10.3082 4.41198 10.3082L4.41087 14.6968L4.092 14.698V10.6959H2.15322C2.15322 10.6959 1.86656 10.4493 1.75324 9.95487C1.65546 9.53267 1.61658 9.21602 1.61658 9.21602Z" fill="#89847E"/>
+  <path d="M13.0006 7.04199L11.2074 7.68751C11.2074 7.68751 11.2241 8.02638 11.2885 8.59413C11.3307 8.96856 11.4252 9.41742 11.4252 9.41742L13.1306 9.8574L14.4461 9.14299C14.4461 9.14299 14.535 8.73746 14.5772 8.24971C14.6061 7.91972 14.6283 7.65418 14.6083 7.63752C14.4006 7.46864 13.0006 7.04199 13.0006 7.04199Z" fill="#ACA299"/>
+  <path d="M11.3662 9.125L14.4449 9.14389C14.4449 9.14389 14.3761 9.50387 14.2472 9.92607C14.1627 10.2038 13.9961 10.6927 13.9961 10.6927H11.9617L11.9251 14.6647L11.6551 14.6658L11.6751 10.4638C11.6751 10.4638 11.574 10.0316 11.4929 9.72608C11.4273 9.47387 11.3662 9.125 11.3662 9.125Z" fill="#89847E"/>
+  <path d="M12.2671 13.2367C12.2482 13.2633 12.2416 13.6422 12.2649 13.6489C12.2882 13.6555 12.9515 13.6489 12.9515 13.6489V13.22C12.9515 13.2189 12.2904 13.2044 12.2671 13.2367Z" fill="#D8D0C5"/>
+  <path d="M5.20089 12.1417C5.20089 12.1417 5.91307 12.1373 5.9264 12.1462C5.93974 12.1551 5.93751 12.5473 5.93751 12.5473C5.93751 12.5473 5.22088 12.5584 5.20755 12.545C5.19422 12.5317 5.20089 12.1417 5.20089 12.1417Z" fill="#D8D0C5"/>
+  <path d="M6.38737 11.402V11.8042C6.38737 11.8042 5.6663 11.822 5.64852 11.7997C5.63074 11.7775 5.63296 11.4164 5.6463 11.4075C5.65963 11.3986 6.38737 11.402 6.38737 11.402Z" fill="#D8D0C5"/>
+  <path d="M3.04776 11.1446C3.04776 11.1446 3.03109 11.5201 3.05443 11.5357C3.07665 11.5523 3.7955 11.5546 3.81105 11.5423C3.82661 11.5301 3.82438 11.1546 3.81105 11.1446C3.79883 11.1357 3.04776 11.1446 3.04776 11.1446Z" fill="#D8D0C5"/>
+  <path d="M3.98401 7.63184C3.98401 7.63184 3.98956 8.59845 3.98956 8.664C3.98956 8.75289 4.02734 8.85288 4.13733 8.85288C4.25177 8.85288 4.28733 8.78289 4.29177 8.674C4.29621 8.56512 4.29621 7.64961 4.29621 7.64961L3.98401 7.63184Z" fill="#2E2E2F"/>
+  <path d="M2.98535 7.62358C2.98535 7.62358 2.99202 8.60131 2.99535 8.66242C2.9998 8.7513 3.03424 8.85463 3.15868 8.85463C3.28311 8.85463 3.31756 8.73686 3.31311 8.66242C3.30978 8.60576 3.30867 7.61914 3.30867 7.61914L2.98535 7.62358Z" fill="#2E2E2F"/>
+  <path d="M1.94568 7.61765C1.94568 7.61765 1.96901 8.59982 1.97346 8.67982C1.9779 8.74981 2.01123 8.8587 2.13789 8.85425C2.26455 8.84981 2.27455 8.71315 2.27455 8.67537C2.27455 8.6376 2.24677 7.56543 2.24677 7.56543L1.94568 7.61765Z" fill="#2E2E2F"/>
+  <path d="M13.7802 7.47266C13.7802 7.47266 13.7725 8.54149 13.7725 8.60038C13.7725 8.65926 13.7869 8.78814 13.928 8.77814C14.0536 8.76926 14.0691 8.63704 14.0691 8.54816C14.0691 8.45927 14.0758 7.48043 14.0758 7.48043L13.7802 7.47266Z" fill="#2E2E2F"/>
+  <path d="M11.8783 7.42171C11.8783 7.42171 11.8783 7.63725 11.8783 7.92612C11.8783 8.215 11.8805 8.41276 11.8861 8.57164C11.8894 8.69719 11.9605 8.76941 12.0716 8.76497C12.1972 8.75941 12.2127 8.65386 12.2127 8.57942C12.2127 8.50498 12.1983 7.41504 12.1983 7.41504L11.8783 7.42171Z" fill="#2E2E2F"/>
+  <path d="M12.8061 7.41668C12.8061 7.41668 12.8083 8.49996 12.8061 8.58107C12.8039 8.69217 12.8661 8.78105 12.9672 8.78105C13.0683 8.78105 13.1283 8.68439 13.1216 8.59551C13.115 8.50662 13.135 7.37891 13.135 7.37891L12.8061 7.41668Z" fill="#2E2E2F"/>
+  <path d="M12.7828 5.14017C12.7828 5.14017 12.7728 3.65136 12.7728 3.59136C12.7728 3.53247 12.8462 3.45581 12.9439 3.48025C13.1906 3.54247 13.4695 3.71024 13.8594 3.77357C14.2494 3.8369 14.7272 3.75913 14.8016 3.75913C14.876 3.75913 14.9572 3.86246 14.8161 3.9369C14.6749 4.01134 14.4427 4.26021 13.945 4.40132C13.5095 4.52464 13.3328 4.54464 13.1573 4.6313C13.0839 4.66797 13.1206 5.11017 13.1206 5.11017L12.7828 5.14017Z" fill="#FE2A22"/>
+  <path d="M11.2074 7.68747C11.2074 7.68747 11.7596 7.53414 12.9462 7.5497C14.1328 7.56525 14.6072 7.63858 14.6072 7.63858C14.6072 7.63858 14.5706 7.51303 14.4595 7.40859C14.3484 7.30415 13.7328 6.65974 13.4062 5.79868C13.2273 5.3287 13.2384 4.92983 12.9162 4.93761C12.634 4.94539 12.6196 5.21204 12.4196 5.78312C12.2196 6.3542 12.0996 6.50642 11.8852 6.81085C11.6696 7.11528 11.4607 7.28416 11.3474 7.41526C11.203 7.58525 11.2074 7.68747 11.2074 7.68747Z" fill="#A62714"/>
+  <path d="M2.90205 5.29521C2.90205 5.29521 2.8965 3.75751 2.89761 3.70085C2.90094 3.4653 3.2187 3.64307 3.24092 3.64863C3.4798 3.70973 3.78201 3.80417 4.05421 3.85084C4.32642 3.8975 4.94306 3.94972 4.99972 3.95417C5.05638 3.95861 5.10305 4.03861 5.00861 4.08527C4.91417 4.13193 4.18087 4.44303 3.89867 4.55525C3.61646 4.66746 3.21648 4.73857 3.21648 4.73857L3.21204 5.34965L2.90205 5.29521Z" fill="#FF2A23"/>
+  <path d="M3.06112 5.09376C2.74558 5.09709 2.55892 6.02149 2.26338 6.56702C1.96784 7.11254 1.65675 7.47363 1.56786 7.55585C1.41232 7.70029 1.44454 7.81251 1.44454 7.81251C1.44454 7.81251 2.15228 7.72473 3.10556 7.71807C4.05884 7.7114 4.73436 7.82251 4.73436 7.82251C4.73436 7.82251 4.71659 7.67251 4.5977 7.5403C4.5166 7.4503 4.16773 7.0781 3.88774 6.53702C3.57887 5.93927 3.38555 5.09043 3.06112 5.09376Z" fill="#A62714"/>
+  <path d="M8.05638 1.58205C7.72084 1.5865 7.58085 2.04869 6.812 3.06975C6.21537 3.86304 5.87205 4.15414 5.83539 4.28413C5.8165 4.35302 5.8265 4.39079 5.8265 4.39079H10.1263C10.1263 4.39079 10.1374 4.30302 10.0963 4.23858C10.0685 4.19636 9.56741 3.55306 9.25521 3.12197C8.42636 1.97981 8.36859 1.57872 8.05638 1.58205Z" fill="#A62714"/>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/comedy.svg b/examples/bedtime-story-teller/assets/img/comedy.svg
new file mode 100644
index 0000000..78cc2ef
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/comedy.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
+  <path d="M6.88588 12.4215C3.78604 12.4215 0.441772 10.4772 0.441772 6.21075C0.441772 1.94433 3.78604 0 6.88588 0C8.60801 0 10.1968 0.566634 11.3745 1.59991C12.6522 2.73318 13.33 4.33308 13.33 6.21075C13.33 8.08842 12.6522 9.67722 11.3745 10.8105C10.1968 11.8438 8.5969 12.4215 6.88588 12.4215Z" fill="url(#paint0_radial_2527_6131)"/>
+  <path d="M12.2066 2.51953C12.7988 3.47503 13.1077 4.61274 13.1077 5.87823C13.1077 7.7559 12.43 9.3447 11.1522 10.478C9.97453 11.5112 8.37462 12.089 6.6636 12.089C4.65704 12.089 2.5527 11.2724 1.31055 9.54024C2.50604 11.5023 4.75481 12.4223 6.88581 12.4223C8.59683 12.4223 10.1967 11.8446 11.3745 10.8113C12.6522 9.67801 13.3299 8.08921 13.3299 6.21154C13.3299 4.79607 12.9444 3.53836 12.2066 2.51953Z" fill="#EB8F00"/>
+  <path d="M4.2015 2.69051C4.15261 2.57274 4.01929 2.51274 3.8993 2.55607C3.7193 2.61496 3.54598 2.69162 3.38043 2.78384C2.94046 3.02605 2.56381 3.36936 2.2816 3.78378C2.20383 3.88933 2.22383 4.0371 2.32716 4.11709C2.3816 4.16265 2.45271 4.18487 2.52381 4.17598C2.57714 4.1682 2.62603 4.14265 2.66381 4.10376C3.09045 3.68601 3.5682 3.32381 4.08484 3.02605L4.09706 3.01938C4.21483 2.95605 4.2615 2.8105 4.2015 2.69051Z" fill="#422B0D"/>
+  <path d="M9.89556 2.57918C9.94444 2.46141 10.0778 2.40141 10.1978 2.44474C10.3766 2.50252 10.55 2.57696 10.7155 2.66695C11.1555 2.90916 11.5321 3.25136 11.8155 3.6669C11.8921 3.77245 11.8721 3.9191 11.7699 4.00021C11.7155 4.04576 11.6444 4.06687 11.5732 4.0591C11.5199 4.05132 11.471 4.02576 11.4333 3.98688C11.0066 3.56912 10.5289 3.20692 10.0122 2.90916L9.99999 2.9025C9.88556 2.83917 9.83889 2.69806 9.89556 2.57918Z" fill="#422B0D"/>
+  <path d="M11.1602 7.1808C11.0047 6.8997 10.6669 6.77638 10.367 6.8897C9.22702 7.22191 8.04486 7.38745 6.85714 7.3819C5.66943 7.38745 4.48727 7.22191 3.34733 6.8897C3.04845 6.77638 2.71069 6.89859 2.55515 7.17858C2.40404 7.45745 2.51293 7.78076 2.6407 8.05964C3.35399 9.62621 4.92613 10.5639 6.84825 10.5695H6.86603C8.78815 10.5695 10.3603 9.62621 11.0747 8.05964C11.2014 7.77854 11.3113 7.45967 11.1602 7.1808Z" fill="#422B0D"/>
+  <path d="M8.63573 10.1258C8.59462 10.088 8.5524 10.0535 8.51018 10.0147C8.05687 9.61579 7.47023 9.40136 6.86582 9.41358C6.24363 9.40358 5.63811 9.61024 5.15258 9.9991C5.11036 10.0335 5.06592 10.0669 5.02481 10.1102C4.9837 10.1535 4.96148 10.1846 4.93481 10.2213C5.54589 10.4602 6.19697 10.5824 6.8536 10.5791H6.87138C7.50023 10.5791 8.12353 10.4669 8.71239 10.2458C8.69017 10.2035 8.66462 10.1635 8.63573 10.1258Z" fill="#ED7770"/>
+  <path d="M10.3672 6.89017C9.22725 7.22238 8.04509 7.38792 6.85738 7.38237C5.66966 7.38792 4.4875 7.22238 3.34756 6.89017C3.04869 6.77685 2.71093 6.89906 2.55538 7.17904C2.53316 7.22126 2.51538 7.26571 2.50427 7.31126C2.54094 7.33015 2.58316 7.34903 2.63315 7.36903C3.97086 8.039 5.44967 8.37898 6.94515 8.3612C8.37952 8.37786 9.79722 8.06566 11.0927 7.45014C11.1449 7.42792 11.1883 7.40681 11.2271 7.38681C11.2183 7.31459 11.1949 7.24349 11.1605 7.17904C11.0049 6.89906 10.6672 6.77573 10.3672 6.89017Z" fill="white"/>
+  <path d="M11.1647 7.18191C11.0069 6.90081 10.668 6.77638 10.3658 6.8897C9.2259 7.22191 8.04374 7.38745 6.85714 7.3819C5.66943 7.38745 4.48727 7.22191 3.34733 6.8897C3.04845 6.77638 2.71069 6.89859 2.55515 7.17858C2.40404 7.45745 2.51293 7.78076 2.6407 8.05964C2.69736 8.18518 2.76069 8.30851 2.83069 8.42739C2.83069 8.42739 2.59737 7.563 2.79958 7.3119C2.86846 7.20524 2.98401 7.13858 3.11067 7.13191C3.16289 7.13191 3.214 7.1408 3.264 7.15635C4.42394 7.49745 5.62721 7.66966 6.83714 7.66744H6.87603C8.08596 7.66966 9.28923 7.49745 10.4492 7.15635C10.4992 7.1408 10.5503 7.13191 10.6025 7.13191C10.7292 7.13858 10.8458 7.20524 10.9147 7.3119C11.1202 7.563 10.8836 8.43073 10.8836 8.43073C10.9525 8.31184 11.0214 8.18963 11.0791 8.06297C11.2058 7.7841 11.3158 7.46189 11.1647 7.18191Z" fill="#EB8F00"/>
+  <path d="M11.007 5.56738C11.007 5.56738 12.8957 5.6196 13.6502 7.01174C13.9657 7.59615 13.9835 8.56721 13.3302 8.92163C12.5402 9.35605 11.7991 8.73942 11.7047 8.08168C11.4503 6.29734 11.007 5.56738 11.007 5.56738Z" fill="#29B6F6"/>
+  <path d="M13.5141 8.25371C13.4397 8.38926 13.2763 8.44815 13.133 8.39148C13.0052 8.32371 12.9708 8.16038 12.9508 8.01706L12.8897 7.57264C12.8641 7.39598 12.6841 6.82379 12.873 6.73047C13.023 6.65714 13.3108 6.85935 13.3952 6.97601C13.5808 7.24044 13.6685 7.99373 13.5141 8.25371Z" fill="#81D4FA"/>
+  <path d="M12.8732 6.73535C13.0232 6.66202 13.3109 6.86423 13.3954 6.98089C13.5809 7.23976 13.6687 7.99305 13.5142 8.25304C13.4398 8.38859 13.2765 8.44747 13.1332 8.39081C13.0054 8.32304 12.9709 8.15971 12.9509 8.01639L12.8898 7.57197" fill="#81D4FA"/>
+  <path d="M2.85384 5.56738C2.85384 5.56738 0.965052 5.6196 0.210648 7.01174C-0.104891 7.5906 -0.117113 8.55721 0.530631 8.91608C1.32059 9.3505 2.06166 8.73387 2.1561 8.07613C2.41053 6.29734 2.85384 5.56738 2.85384 5.56738Z" fill="#29B6F6"/>
+  <path d="M0.345844 8.25371C0.420285 8.38926 0.58361 8.44815 0.726935 8.39148C0.854706 8.32371 0.889149 8.16038 0.909148 8.01706L0.970256 7.57264C0.99581 7.39598 1.1758 6.82379 0.986922 6.73047C0.83693 6.65714 0.549167 6.85935 0.464727 6.97601C0.279181 7.24044 0.191408 7.99373 0.345844 8.25371Z" fill="#81D4FA"/>
+  <path d="M5.16929 5.43104L5.15263 5.40659L5.12929 5.37659C5.12041 5.36437 5.11152 5.35437 5.10041 5.34437L5.03263 5.27549C5.00375 5.2466 4.97153 5.21771 4.93597 5.18772C4.86264 5.12439 4.78042 5.07328 4.69154 5.03328C4.60599 4.9955 4.51266 4.97551 4.41933 4.97551C4.45822 4.97551 4.42933 4.97551 4.43822 4.97551H4.37489C4.36378 4.97439 4.35378 4.97439 4.34267 4.97551C4.32267 4.97773 4.30267 4.98106 4.28267 4.98551C4.23712 4.99662 4.19157 5.01106 4.14824 5.02884C4.05935 5.06772 3.97713 5.11994 3.9038 5.18327C3.84381 5.23327 3.78714 5.28771 3.73492 5.3466L3.67159 5.4177L3.63826 5.45548C3.50383 5.6088 3.27162 5.62436 3.11829 5.49103C3.00385 5.39104 2.96274 5.22994 3.01385 5.08661L3.02607 5.05106C3.03607 5.02773 3.04496 4.99217 3.06607 4.94995C3.11718 4.82996 3.18384 4.71552 3.26384 4.61219C3.45827 4.35554 3.73159 4.16889 4.04157 4.08C4.1049 4.06334 4.16935 4.05111 4.2349 4.04223C4.26823 4.04223 4.31712 4.03223 4.33156 4.03223H4.416C4.54155 4.03445 4.6671 4.05223 4.78931 4.08334C4.90597 4.11556 5.01708 4.16222 5.12263 4.22222C5.29484 4.32332 5.44594 4.45665 5.56705 4.61553C5.64927 4.7233 5.71926 4.83996 5.77371 4.9644C5.78259 4.98217 5.79037 4.99995 5.79481 5.01884C5.80037 5.03328 5.8037 5.0455 5.80704 5.0555L5.81704 5.0855C5.88037 5.28215 5.77259 5.49325 5.57594 5.55658C5.42817 5.60436 5.26484 5.55547 5.16818 5.43437L5.16929 5.43104Z" fill="#422B0D"/>
+  <path d="M10.2055 5.43104L10.1855 5.40659L10.1622 5.37659C10.1533 5.36437 10.1444 5.35437 10.1333 5.34437L10.0644 5.27549C10.0344 5.24438 10.0022 5.21549 9.96887 5.18772C9.89554 5.12439 9.81332 5.07328 9.72444 5.03328C9.63889 4.9955 9.54556 4.97551 9.45223 4.97551C9.49112 4.97551 9.46223 4.97551 9.47112 4.97551H9.40668C9.39557 4.97439 9.38557 4.97439 9.37446 4.97551C9.35446 4.97773 9.33446 4.98106 9.31446 4.98551C9.26891 4.99662 9.22335 5.01106 9.18002 5.02884C9.09003 5.06994 9.00559 5.12328 8.93004 5.18772C8.87004 5.23882 8.81449 5.29327 8.76227 5.35104L8.69894 5.42215L8.66561 5.45992C8.53117 5.61325 8.29896 5.6288 8.14563 5.49548C8.0312 5.39548 7.99009 5.23438 8.0412 5.09106L8.05342 5.0555C8.06342 5.03217 8.0723 4.99662 8.0923 4.9544C8.14563 4.83218 8.21341 4.71774 8.29563 4.61219C8.49006 4.35554 8.76338 4.16889 9.07336 4.08C9.13669 4.06334 9.20113 4.05111 9.26669 4.04223C9.30002 4.04223 9.3489 4.03223 9.36335 4.03223H9.44779C9.57334 4.03445 9.69888 4.05223 9.8211 4.08334C9.93665 4.11667 10.0478 4.16333 10.1522 4.22333C10.3244 4.32332 10.4755 4.45776 10.5966 4.61664C10.6433 4.67663 10.6844 4.73996 10.7222 4.80552C10.7522 4.85774 10.7788 4.91107 10.8033 4.96551C10.8122 4.98328 10.8188 5.00106 10.8244 5.01995C10.8244 5.03439 10.8333 5.04661 10.8366 5.05661L10.8466 5.08661C10.9099 5.28327 10.8022 5.49436 10.6055 5.55769C10.4577 5.60547 10.2944 5.55658 10.1977 5.43548L10.2055 5.43104Z" fill="#422B0D"/>
+  <defs>
+    <radialGradient id="paint0_radial_2527_6131" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.88588 6.21075) scale(6.32852 6.32849)">
+      <stop offset="0.5" stop-color="#FDE030"/>
+      <stop offset="0.92" stop-color="#F7C02B"/>
+      <stop offset="1" stop-color="#F4A223"/>
+    </radialGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/copy.svg b/examples/bedtime-story-teller/assets/img/copy.svg
new file mode 100644
index 0000000..91fd3d9
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/copy.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 3C7.63256 3.00095 7.76015 3.0524 7.85547 3.14453L11.8555 7.14453C11.9476 7.23986 11.999 7.36744 12 7.5V12.5C11.9996 12.6325 11.9472 12.7598 11.8535 12.8535C11.7598 12.9472 11.6325 12.9996 11.5 13H4.5C4.36751 12.9996 4.24017 12.9472 4.14648 12.8535C4.0528 12.7598 4.00038 12.6325 4 12.5V3.5C4.00038 3.36751 4.0528 3.24017 4.14648 3.14648C4.24017 3.0528 4.36751 3.00038 4.5 3H7.5ZM5 4V12H11V7.98535L7.5 8C7.36718 8.00037 7.23911 7.94873 7.14453 7.85547C7.05242 7.76014 7.00097 7.63256 7 7.5V4H5ZM6 1C6.13261 1 6.25975 1.05272 6.35352 1.14648C6.44728 1.24025 6.5 1.36739 6.5 1.5C6.5 1.63261 6.44728 1.75975 6.35352 1.85352C6.25975 1.94728 6.13261 2 6 2H3V10.5C3 10.6326 2.94728 10.7597 2.85352 10.8535C2.75975 10.9473 2.63261 11 2.5 11C2.36739 11 2.24025 10.9473 2.14648 10.8535C2.05272 10.7597 2 10.6326 2 10.5V1.5C2 1.36739 2.05272 1.24025 2.14648 1.14648C2.24025 1.05272 2.36739 1 2.5 1H6ZM8 7L10.2803 6.98535L8 4.70508V7Z" fill="#008184"/>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/double-arrow.svg b/examples/bedtime-story-teller/assets/img/double-arrow.svg
new file mode 100644
index 0000000..22eef1b
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/double-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 7.5C1.63261 7.5 1.75975 7.55272 1.85352 7.64648C1.94728 7.74025 2 7.86739 2 8C1.99977 9.15493 2.33254 10.2856 2.95898 11.2559C3.58536 12.226 4.47875 12.9946 5.53125 13.4697C6.58383 13.9448 7.7516 14.1065 8.89355 13.9346C10.0355 13.7625 11.1038 13.2641 11.9697 12.5H9.5C9.36739 12.5 9.24025 12.4473 9.14648 12.3535C9.05272 12.2597 9 12.1326 9 12C9 11.8674 9.05272 11.7403 9.14648 11.6465C9.24025 11.5527 9.36739 11.5 9.5 11.5H13C13.1326 11.5 13.2597 11.5527 13.3535 11.6465C13.4473 11.7403 13.5 11.8674 13.5 12V15.5C13.5 15.6326 13.4473 15.7597 13.3535 15.8535C13.2597 15.9473 13.1326 16 13 16C12.8674 16 12.7403 15.9473 12.6465 15.8535C12.5527 15.7597 12.5 15.6326 12.5 15.5V13.3604C11.4795 14.2167 10.2358 14.7643 8.91504 14.9385C7.59413 15.1126 6.25059 14.9056 5.04297 14.3428C3.83532 13.7799 2.81282 12.8843 2.09668 11.7607C1.38056 10.6372 1.00036 9.33236 1 8C1 7.86739 1.05272 7.74025 1.14648 7.64648C1.24025 7.55272 1.36739 7.5 1.5 7.5ZM3 0C3.13261 0 3.25975 0.0527162 3.35352 0.146484C3.44728 0.240253 3.5 0.367392 3.5 0.5V2.63965C4.75716 1.57524 6.35276 0.994033 8 1C9.85652 1 11.6374 1.73705 12.9502 3.0498C14.2629 4.36256 15 6.14348 15 8C15 8.13261 14.9473 8.25975 14.8535 8.35352C14.7597 8.44728 14.6326 8.5 14.5 8.5C14.3674 8.5 14.2403 8.44728 14.1465 8.35352C14.0527 8.25975 14 8.13261 14 8C14.0002 6.84507 13.6675 5.71441 13.041 4.74414C12.4146 3.77399 11.5212 3.00542 10.4688 2.53027C9.41617 2.05519 8.2484 1.89345 7.10645 2.06543C5.96446 2.23748 4.89622 2.73589 4.03027 3.5H6.5C6.63261 3.5 6.75975 3.55272 6.85352 3.64648C6.94728 3.74025 7 3.86739 7 4C7 4.13261 6.94728 4.25975 6.85352 4.35352C6.75975 4.44728 6.63261 4.5 6.5 4.5H3C2.86739 4.5 2.74025 4.44728 2.64648 4.35352C2.55272 4.25975 2.5 4.13261 2.5 4V0.5C2.5 0.367392 2.55272 0.240253 2.64648 0.146484C2.74025 0.0527162 2.86739 0 3 0Z" fill="#171E21"/>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/doubt.svg b/examples/bedtime-story-teller/assets/img/doubt.svg
new file mode 100644
index 0000000..36c98a0
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/doubt.svg
@@ -0,0 +1,32 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.95533 14.0885C4.8555 14.0885 1.51123 12.1442 1.51123 7.87775C1.51123 3.61133 4.8555 1.66699 7.95533 1.66699C9.67746 1.66699 11.2663 2.23363 12.444 3.2669C13.7217 4.40017 14.3994 6.00008 14.3994 7.87775C14.3994 9.75542 13.7217 11.3442 12.444 12.4775C11.2663 13.5108 9.66635 14.0885 7.95533 14.0885Z" fill="url(#paint0_radial_3036_985)"/>
+<path d="M7.95533 14.0885C4.8555 14.0885 1.51123 12.1442 1.51123 7.87775C1.51123 3.61133 4.8555 1.66699 7.95533 1.66699C9.67746 1.66699 11.2663 2.23363 12.444 3.2669C13.7217 4.40017 14.3994 6.00008 14.3994 7.87775C14.3994 9.75542 13.7217 11.3442 12.444 12.4775C11.2663 13.5108 9.66635 14.0885 7.95533 14.0885Z" fill="url(#paint1_linear_3036_985)"/>
+<path d="M13.2762 4.18555C13.8684 5.14105 14.1773 6.27876 14.1773 7.54424C14.1773 9.42191 13.4995 11.0107 12.2218 12.144C11.0441 13.1773 9.4442 13.755 7.73318 13.755C5.72662 13.755 3.62228 12.9384 2.38013 11.2063C3.57562 13.1684 5.82439 14.0883 7.95539 14.0883C9.66641 14.0883 11.2663 13.5106 12.444 12.4773C13.7217 11.344 14.3995 9.75523 14.3995 7.87756C14.3995 6.46208 14.014 5.20438 13.2762 4.18555Z" fill="#EB8F00"/>
+<path d="M1.5958 9.2323C1.39359 9.47784 1.82357 10.13 1.90023 10.4622C2.08466 11.2644 1.90023 11.4622 1.88579 12.1755C1.87356 12.9599 2.108 13.6198 2.70574 14.0409C3.26793 14.4398 3.94568 14.6442 4.8123 14.3887C5.67892 14.1331 6.20555 13.8509 6.25 13.4243C6.27444 13.2476 6.18111 13.0743 6.0189 12.9987C6.10556 12.9576 6.17445 12.8876 6.21333 12.7999C6.41999 12.3066 6.00779 12.2021 6.00779 12.2021C6.06445 12.1344 6.11223 12.0599 6.15 11.9799C6.27333 11.7344 6.25333 11.4011 5.89779 11.2922C5.73447 11.2422 5.69003 11.2688 5.69003 11.2688C5.85891 11.0955 6.06112 10.9566 6.28444 10.8633C6.88219 10.6067 7.59104 10.4511 7.76769 10.3011C8.02435 10.0789 8.0399 9.65116 7.58659 9.52339C6.93552 9.33229 5.7378 9.77671 5.00895 10.24C4.2801 10.7033 3.61125 10.9533 3.38904 10.8689C3.16683 10.7844 3.02906 10.6467 2.94462 10.3133C2.78796 9.69338 2.66685 9.4534 2.40131 9.22119C2.18132 9.03231 1.75135 9.04342 1.5958 9.2323Z" fill="url(#paint2_radial_3036_985)"/>
+<path d="M8.02107 9.82013C7.94663 8.80241 5.94229 9.43127 4.91901 10.1012C3.64686 10.9345 3.4602 10.7867 3.33576 10.709C3.18577 10.6156 3.09133 10.5379 3.018 10.249C2.85246 9.5957 2.8069 9.35572 2.50914 9.09573C2.26026 8.86574 1.5103 8.8713 1.46031 9.23572C1.40587 9.62792 1.62808 9.70125 1.77807 10.4557C1.96361 11.2201 1.88917 12.0644 1.88917 12.0644C1.88917 12.0644 2.23582 11.2589 1.90251 10.0035C1.83473 9.66459 1.51253 9.14573 2.05694 9.20461C2.58358 9.26128 2.61802 9.72014 2.78246 10.3545C2.87357 10.7134 2.96689 10.9245 3.3291 11.0245C3.68908 11.1234 4.52126 10.6612 5.119 10.2812C5.85118 9.81569 6.93668 9.40905 7.50665 9.5757C7.75331 9.62903 7.91774 9.9479 7.65887 10.1734C7.24778 10.5612 5.66675 10.7356 4.71458 11.7656C4.71458 11.7656 4.83013 11.8078 5.00345 11.7222C5.17789 11.6367 5.82896 11.3145 5.82896 11.3145C6.0234 11.3967 6.11673 11.72 6.01118 11.8922C5.84007 12.1711 5.17455 12.5566 4.84235 12.54C4.84235 12.54 4.83679 12.71 5.17011 12.6644C5.27566 12.65 5.7123 12.5544 6.01784 12.3178C6.24561 12.4822 6.18117 12.7622 6.01007 12.9644C5.84007 13.1655 5.42454 13.4255 4.99679 13.471C4.99679 13.471 4.95457 13.6332 5.24233 13.6299C5.53009 13.6266 5.8423 13.4799 6.07228 13.301C6.10673 13.3555 6.13895 13.4744 6.10006 13.6377C6.04006 13.8899 5.70119 14.1454 5.04678 14.2877C4.44348 14.4188 3.76352 14.511 2.45137 13.8299C2.45137 13.8299 2.94134 14.4665 4.22016 14.5799C5.44676 14.6887 6.87891 14.1454 6.30449 13.0555C6.30449 13.0555 6.42893 12.8711 6.44449 12.6178C6.4556 12.4444 6.40116 12.2078 6.27338 12.1C6.39338 11.7467 6.3556 11.5023 6.27894 11.3578C6.22783 11.2623 6.09895 11.1689 6.09895 11.1689C6.09895 11.1689 6.35338 10.939 7.10334 10.7456C7.58443 10.6201 8.06662 10.4423 8.02107 9.82013Z" fill="#EB8F00"/>
+<path d="M2.95983 10.0137C2.95983 10.0137 3.49647 10.887 4.67862 10.2537C4.67862 10.2537 3.95311 11.0147 3.38869 10.8692C2.82428 10.7236 2.95983 10.0137 2.95983 10.0137Z" fill="#EB8F00"/>
+<path d="M6.33333 11.5042C6.33333 11.5042 6.60665 10.9176 7.1044 10.7432C7.1044 10.7432 6.29555 10.812 5.98779 11.1443L6.33333 11.5042Z" fill="#EB8F00"/>
+<path d="M9.42918 8.81273C9.39362 8.80606 9.36029 8.79162 9.33252 8.76829C8.83143 8.36609 8.23369 8.10388 7.59928 8.00611C6.96486 7.89611 6.31379 7.95611 5.71049 8.17943C5.67715 8.19276 5.6416 8.19721 5.60605 8.19165C5.52827 8.17832 5.46494 8.12054 5.44383 8.04388C5.42272 7.96833 5.44828 7.88834 5.50828 7.83834C6.68599 6.86062 8.43256 7.02283 9.41029 8.20054C9.49029 8.2972 9.56362 8.39942 9.63028 8.50497C9.6725 8.57052 9.6725 8.65496 9.63028 8.72051C9.58695 8.78828 9.50806 8.82384 9.42918 8.81273Z" fill="#422B0D"/>
+<path d="M9.86272 4.3457C10.3282 4.3457 10.7516 4.73901 10.7516 5.39231C10.7516 6.04561 10.3282 6.4378 9.86272 6.4378C9.39719 6.4378 8.97388 6.04449 8.97388 5.39231C8.97388 4.74012 9.39719 4.3457 9.86272 4.3457Z" fill="#422B0D"/>
+<path d="M6.01506 3.33398C5.54953 3.33398 5.12622 3.7273 5.12622 4.37948C5.12622 5.03166 5.54953 5.42609 6.01506 5.42609C6.4817 5.42609 6.9039 5.03278 6.9039 4.37948C6.9039 3.72618 6.4817 3.33398 6.01506 3.33398Z" fill="#422B0D"/>
+<path d="M5.3031 2.06995C5.25311 1.98774 5.24644 1.88552 5.28533 1.79775C5.32755 1.70997 5.41088 1.64998 5.50754 1.63776C6.11306 1.54332 6.73081 1.68664 7.233 2.03662C7.42077 2.1655 7.58743 2.32105 7.72853 2.49993C7.73742 2.51104 7.7452 2.52326 7.75297 2.53659C7.82852 2.65436 7.80297 2.80991 7.69409 2.89768C7.57743 2.99435 7.40633 2.99101 7.29411 2.8888L7.34077 2.81324L7.28411 2.87991C6.79747 2.47326 6.18861 2.24106 5.55531 2.22217C5.44976 2.22217 5.35199 2.16662 5.29866 2.07551L5.3031 2.06995Z" fill="#422B0D"/>
+<path d="M11.2213 4.05778C11.3035 4.01223 11.3591 3.9289 11.3702 3.83557C11.3768 3.73891 11.3357 3.64558 11.2591 3.5867C10.778 3.20339 10.1669 3.02006 9.55472 3.07784C9.32807 3.09673 9.10586 3.15006 8.89476 3.23561L8.85476 3.25449C8.73143 3.32005 8.67699 3.46782 8.7281 3.59781C8.78254 3.73891 8.93031 3.81891 9.07808 3.78669V3.6978L9.09364 3.78446C9.71583 3.66891 10.3591 3.76558 10.9202 4.05889C11.0124 4.11111 11.1246 4.11111 11.2169 4.05889L11.2213 4.05778Z" fill="#422B0D"/>
+<path d="M5.99501 3.68464C5.88057 3.60464 5.70836 3.63019 5.59725 3.79018C5.48615 3.95129 5.52281 4.12017 5.63725 4.20016C5.75169 4.28016 5.9239 4.2546 6.03501 4.09461C6.14611 3.93351 6.10945 3.76463 5.99501 3.68464Z" fill="#896024"/>
+<path d="M9.83998 4.63581C9.72554 4.55581 9.55333 4.58137 9.44223 4.74136C9.33112 4.90246 9.36779 5.07134 9.48222 5.15133C9.59666 5.23133 9.76888 5.20577 9.87998 5.04578C9.9922 4.88468 9.95553 4.7158 9.83998 4.63581Z" fill="#896024"/>
+<defs>
+<radialGradient id="paint0_radial_3036_985" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.95533 7.87775) scale(6.32852 6.32849)">
+<stop offset="0.5" stop-color="#FDE030"/>
+<stop offset="0.92" stop-color="#F7C02B"/>
+<stop offset="1" stop-color="#F4A223"/>
+</radialGradient>
+<linearGradient id="paint1_linear_3036_985" x1="7.95533" y1="14.0885" x2="7.95533" y2="1.66699" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4A223"/>
+<stop offset="0.08" stop-color="#F7C02B"/>
+<stop offset="0.54" stop-color="#FDE030" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint2_radial_3036_985" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.49448 10.1672) scale(6.60319 6.20698)">
+<stop offset="0.27" stop-color="#FFF176"/>
+<stop offset="1" stop-color="#FFC400"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/fun.svg b/examples/bedtime-story-teller/assets/img/fun.svg
new file mode 100644
index 0000000..24c3533
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/fun.svg
@@ -0,0 +1,30 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.71637 14.5869C1.96862 14.8602 3.00764 14.3835 3.82774 14.0012C4.44226 13.7156 6.90146 12.7066 8.12384 12.1832C8.45388 12.0421 8.93394 11.8576 9.27953 11.4031C9.58624 10.9986 10.3997 9.28064 8.76169 7.54043C7.09926 5.77354 5.38683 6.26138 4.74675 6.71477C4.37003 6.98147 4.06333 7.58265 3.92553 7.88825C3.34324 9.17952 2.51313 11.5454 2.17531 12.4755C1.92751 13.1611 1.46634 14.3157 1.71637 14.5869Z" fill="#FFC107"/>
+<path d="M3.76111 8.27734C3.77667 8.4707 3.81556 8.78519 3.94888 9.39082C4.03999 9.80643 4.18887 10.242 4.30997 10.5298C4.67329 11.3955 5.18326 11.7444 5.6999 12.0245C6.57763 12.5001 7.17427 12.589 7.17427 12.589L6.45875 12.8813C6.45875 12.8813 6.02544 12.7912 5.43436 12.5001C4.87106 12.2223 4.28442 11.7522 3.85555 10.8321C3.67001 10.4332 3.56224 10.0465 3.50002 9.73975C3.42335 9.3597 3.41113 9.14412 3.41113 9.14412L3.76111 8.27734Z" fill="#FF8F00"/>
+<path d="M2.88196 10.5312C2.88196 10.5312 2.97084 11.2523 3.56637 12.1623C4.26411 13.2267 5.2385 13.4011 5.2385 13.4011L4.59076 13.6678C4.59076 13.6678 3.86746 13.4467 3.17972 12.5078C2.75085 11.9223 2.63086 11.2223 2.63086 11.2223L2.88196 10.5312Z" fill="#FF8F00"/>
+<path d="M2.26514 12.2402C2.26514 12.2402 2.42735 12.8624 2.78289 13.3268C3.2062 13.8813 3.74506 14.0424 3.74506 14.0424L3.24842 14.2624C3.24842 14.2624 2.87177 14.1835 2.45957 13.6613C2.14626 13.2646 2.05737 12.8091 2.05737 12.8091L2.26514 12.2402Z" fill="#FF8F00"/>
+<g opacity="0.44">
+<path opacity="0.44" d="M1.99553 13.8201C1.97331 13.7701 1.97331 13.7134 1.99664 13.6645L4.82649 7.79492L5.29203 9.54514L2.31441 13.8468C2.23441 13.9668 2.05442 13.9513 1.99553 13.8201Z" fill="#FFFDE7"/>
+</g>
+<path d="M5.51712 10.1331C6.83951 11.68 8.34525 11.4866 8.84643 11.0954C9.34871 10.7032 9.74543 9.35522 8.4286 7.83392C7.04842 6.24039 5.48601 6.69489 5.12485 7.03938C4.76369 7.38387 4.30364 8.71403 5.51712 10.1331Z" fill="url(#paint0_linear_2537_13918)"/>
+<path d="M10.0585 10.7693C9.57624 10.3649 9.31954 10.4371 8.97505 10.5805C8.53055 10.7649 7.83158 10.9016 6.88257 10.5805L7.16816 9.89272C7.73156 10.0827 8.13939 9.99049 8.49166 9.78272C8.94505 9.51607 9.56513 9.15053 10.5297 9.96049C10.932 10.2983 11.3442 10.5227 11.6465 10.4205C11.8665 10.3471 11.9832 10.0194 12.0421 9.75828C12.0477 9.73495 12.0565 9.66828 12.0632 9.6094C12.1166 9.20164 12.2055 8.32169 12.8611 7.87171C13.5623 7.39063 14.2991 7.39062 14.2991 7.39062L14.4324 8.715C14.0935 8.665 13.8579 8.73389 13.659 8.84388C12.91 9.26053 13.5623 10.8604 12.3966 11.3982C11.2753 11.9193 10.3586 11.0204 10.0585 10.7693Z" fill="#03A9F4"/>
+<path d="M5.93267 9.08065L5.45047 8.64837C6.33598 7.65936 6.10266 6.9326 5.93267 6.40365C5.89823 6.29697 5.86601 6.19584 5.8449 6.09916C5.76935 5.7569 5.75379 5.45908 5.77712 5.19905C5.43714 4.77566 5.28715 4.33227 5.27715 4.30227C5.07049 3.67664 5.22604 3.06656 5.58269 2.49426C6.30376 1.33301 7.60925 1.33301 7.60925 1.33301L8.04478 2.49871C7.71369 2.48537 6.62819 2.50204 6.29487 3.02767C5.87379 3.68997 6.15044 4.09891 6.17044 4.14558C6.25154 4.04001 6.33376 3.95556 6.40709 3.89C6.93928 3.41771 7.40148 3.34993 7.69591 3.3766C8.02701 3.4066 8.32699 3.57329 8.54142 3.84666C8.77585 4.1467 8.87252 4.53674 8.79808 4.89123C8.72586 5.23683 8.49587 5.52909 8.15033 5.71467C7.54703 6.03916 7.04484 5.9947 6.70819 5.88247C6.71041 5.89025 6.71152 5.89914 6.71374 5.90692C6.72596 5.96248 6.75041 6.04027 6.77929 6.13028C6.97595 6.73924 7.34149 7.70603 5.93267 9.08065ZM6.7493 4.91012C6.81374 4.9568 6.88151 4.99569 6.95151 5.02347C7.18483 5.11682 7.43926 5.0857 7.72813 4.93013C7.89812 4.839 7.91812 4.74121 7.92479 4.70899C7.94479 4.61231 7.91146 4.48896 7.83924 4.39673C7.77591 4.3156 7.70258 4.27338 7.61481 4.26449C7.44815 4.25004 7.2226 4.35561 6.99706 4.55675C6.88929 4.65343 6.80707 4.77233 6.7493 4.91012Z" fill="#F44336"/>
+<path d="M7.8644 9.26121L7.17432 9.24232C7.17432 9.24232 7.50213 7.39098 8.56338 7.07983C8.76229 7.02204 8.9801 6.96315 9.19901 6.93092C9.32903 6.91092 9.53461 6.88092 9.63574 6.84313C9.65907 6.66867 9.58573 6.44642 9.5035 6.19416C9.43904 5.99858 9.37237 5.79745 9.33681 5.57742C9.26791 5.14848 9.38237 4.76954 9.65907 4.5084C9.99689 4.19169 10.5425 4.09056 11.1581 4.23058C11.5093 4.31059 11.7682 4.48284 11.996 4.63397C12.3216 4.85066 12.5117 4.96067 12.9095 4.69286C13.3906 4.36838 12.7617 3.09822 12.4272 2.36479L13.6751 1.84473C13.8429 2.21144 14.653 4.09834 14.1185 5.17515C13.9385 5.53741 13.6285 5.77744 13.2217 5.86746C12.3372 6.06526 11.8193 5.72077 11.4415 5.46963C11.2626 5.35072 11.1059 5.25738 10.9359 5.20848C9.75464 4.87177 11.4037 6.60977 10.6314 7.39098C10.168 7.85882 9.03566 7.98217 8.96232 7.99995C8.23334 8.17552 7.8644 9.26121 7.8644 9.26121Z" fill="#F48FB1"/>
+<path d="M5.77735 5.19922C5.75624 5.44365 5.74624 5.5892 5.80957 5.90696C6.11511 6.13139 6.78063 6.13139 6.78063 6.13139C6.75175 6.0414 6.72619 5.96362 6.71508 5.90807C6.71286 5.90029 6.71175 5.8914 6.70953 5.88363C6.03289 5.54587 5.77735 5.19922 5.77735 5.19922Z" fill="#C92B27"/>
+<path d="M4.39272 6.29325L3.2439 5.72994L3.81609 4.90332L4.71715 5.49996L4.39272 6.29325Z" fill="#FFC107"/>
+<path d="M2.69818 4.73278C2.11154 4.6539 1.51379 4.15615 1.44824 4.09948L2.02488 3.42285C2.19931 3.57062 2.56929 3.81839 2.81706 3.85172L2.69818 4.73278Z" fill="#FB8C00"/>
+<path d="M3.73405 3.25204L2.88965 2.97539C2.98631 2.67985 3.01186 2.36097 2.96187 2.05321L3.8396 1.91211C3.91182 2.35875 3.87515 2.82206 3.73405 3.25204Z" fill="#03A9F4"/>
+<path d="M9.87734 2.40185L9.00903 2.5918L9.25976 3.73797L10.1281 3.54802L9.87734 2.40185Z" fill="#FB8C00"/>
+<path d="M11.1631 2.86263L10.552 2.2171C10.872 1.91379 10.9453 1.51714 10.9453 1.5127L11.823 1.65602C11.8119 1.72602 11.6997 2.35487 11.1631 2.86263Z" fill="#FFC107"/>
+<path d="M12.2782 6.0445L11.502 6.28711L11.7671 7.13551L12.5434 6.8929L12.2782 6.0445Z" fill="#FB8C00"/>
+<path d="M11.7284 13.4486L10.8451 13.3442C10.8829 13.0298 10.6484 12.6442 10.584 12.5587L11.2951 12.0254C11.3484 12.0954 11.8117 12.7365 11.7284 13.4486Z" fill="#F44336"/>
+<path d="M14.264 12.3215C13.9318 12.2715 13.5919 12.2515 13.2563 12.2637L13.2263 11.3748C13.6163 11.3615 14.0107 11.3837 14.3963 11.4426L14.264 12.3215Z" fill="#FB8C00"/>
+<path d="M13.6941 12.9134L13.0696 13.5459L13.929 14.3944L14.5535 13.7619L13.6941 12.9134Z" fill="#F48FB1"/>
+<path d="M11.8763 8.66004L11.2341 7.92578L10.4999 8.56796L11.142 9.30222L11.8763 8.66004Z" fill="#F44336"/>
+<defs>
+<linearGradient id="paint0_linear_2537_13918" x1="9.15472" y1="7.76041" x2="5.84683" y2="9.74515" gradientUnits="userSpaceOnUse">
+<stop offset="0.0235" stop-color="#8F4700"/>
+<stop offset="1" stop-color="#703E2D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/ghost.svg b/examples/bedtime-story-teller/assets/img/ghost.svg
new file mode 100644
index 0000000..690c35c
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/ghost.svg
@@ -0,0 +1,31 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2537 13.038C13.157 12.8369 12.937 12.7269 12.7182 12.7702L12.6071 12.7824H12.5782C12.1582 12.7824 11.9738 12.6713 11.846 12.3591C11.6515 11.8847 11.8115 11.1881 11.9738 10.6348C12.3071 9.49707 12.7626 7.9405 12.7515 6.41281C12.7504 6.12949 12.7337 5.84728 12.6993 5.56619C12.6448 5.11844 12.5393 4.67735 12.386 4.25293C12.4271 6.38614 12.0249 9.10932 10.1883 10.9981C8.7217 12.5069 6.22184 13.3857 5.21411 13.2202C6.38072 14.4657 8.05507 15.1068 9.75498 14.9579C11.2638 14.8357 13.0248 14.2235 13.2759 13.5346C13.3359 13.3724 13.327 13.1935 13.2537 13.038Z" fill="#E0E0E0"/>
+<path d="M3.95852 5.76086C3.313 5.68531 2.64414 5.37977 2.40304 4.76869C2.21305 4.29427 2.05084 3.58654 1.49643 3.67098C0.807574 3.77653 0.968676 5.16422 1.12978 5.69975C1.78419 7.8774 3.9163 8.22072 3.95074 8.1685C3.98518 8.11628 4.11851 5.75864 3.95852 5.76086Z" fill="#E0E0E0"/>
+<path d="M3.95831 5.76105C3.60721 5.72438 3.26945 5.61106 2.96836 5.42773C3.0428 5.71438 3.01169 6.0177 2.87947 6.28324C2.63393 6.83876 1.95508 7.13653 1.95508 7.13653C2.81948 8.03981 3.92608 8.20757 3.95497 8.1698C3.99941 8.1098 4.1183 5.75883 3.95831 5.76105Z" fill="#CCCCCC"/>
+<path d="M12.0402 5.76086C12.6857 5.68531 13.3546 5.37977 13.5957 4.76869C13.7857 4.29427 13.9479 3.58654 14.5023 3.67098C15.1878 3.77542 15.0267 5.16422 14.8656 5.69975C14.2112 7.8774 12.0791 8.22183 12.0446 8.1685C12.0102 8.11517 11.8802 5.75864 12.0402 5.76086Z" fill="#E0E0E0"/>
+<path d="M14.2336 6.22844C13.8136 6.69175 12.8514 7.13395 11.9692 7.19839C11.9726 7.52281 11.997 7.84724 12.0403 8.16944C12.0759 8.22166 14.2069 7.87835 14.8613 5.7007C14.9746 5.29516 15.0191 4.87408 14.9913 4.4541C14.928 5.10962 14.6624 5.72958 14.2336 6.22844Z" fill="#CCCCCC"/>
+<path d="M12.757 6.41038C12.7559 6.12706 12.7392 5.84485 12.7048 5.56376C12.4826 3.7472 11.456 2.16951 10.0249 1.44399C9.37719 1.10846 8.64723 0.967355 7.92171 1.03846C6.41401 1.19845 5.06853 2.05396 4.28524 3.35166C2.31423 6.64814 3.57639 10.6357 3.9097 11.3134C5.61405 14.7766 8.36724 15.0721 9.75606 14.9599C11.2649 14.8377 13.0259 14.2255 13.277 13.5366C13.3359 13.3744 13.3281 13.1955 13.2548 13.0389C13.1581 12.8378 12.9381 12.7278 12.7192 12.7711L12.6081 12.7833H12.5792C12.1593 12.7833 11.9748 12.6722 11.8471 12.36C11.6526 11.8856 11.8126 11.189 11.9748 10.6357C12.3081 9.5002 12.7648 7.94362 12.757 6.41038Z" fill="#E0E0E0"/>
+<path d="M13.2539 13.038C13.1573 12.8369 12.9373 12.7269 12.7184 12.7702L12.6073 12.7824H12.5784C12.1584 12.7824 11.974 12.6713 11.8462 12.3591C11.6518 11.8847 11.8118 11.1881 11.974 10.6348C12.3073 9.49707 12.7628 7.9405 12.7517 6.41281C12.7506 6.12949 12.734 5.84728 12.6995 5.56619C12.6451 5.11844 12.5395 4.67735 12.3862 4.25293C12.4273 6.38614 12.0251 9.10932 10.1885 10.9981C8.72195 12.5069 6.22208 13.3857 5.21436 13.2202C6.38096 14.4657 8.05532 15.1068 9.75523 14.9579C11.264 14.8357 13.0251 14.2235 13.2761 13.5346C13.3361 13.3724 13.3273 13.1935 13.2539 13.038Z" fill="#CCCCCC"/>
+<path d="M7.74096 6.87137C6.79546 6.87693 5.85106 6.79693 4.92 6.63361C4.76223 6.60695 4.61335 6.71249 4.58669 6.87026C4.58113 6.90248 4.58113 6.9347 4.58669 6.96692C4.85556 8.2824 6.14994 9.36234 7.7443 9.36234C9.48754 9.36234 10.6619 8.2513 10.9052 6.96248C10.933 6.80582 10.8286 6.65694 10.6719 6.62917C10.6386 6.62361 10.6053 6.62361 10.5719 6.62917C9.63753 6.79471 8.6898 6.87582 7.74096 6.87137Z" fill="url(#paint0_linear_2537_14037)"/>
+<path d="M7.96379 7.24675H7.74158H7.63825C7.16606 7.24675 6.70275 7.22342 6.2561 7.18676V9.20886C6.25721 9.98771 6.88718 10.6188 7.66603 10.6199H7.9349C8.71486 10.6199 9.34594 9.98882 9.34705 9.20886V7.17676C8.90041 7.21787 8.43599 7.2412 7.96379 7.24675Z" fill="url(#paint1_linear_2537_14037)"/>
+<path opacity="0.3" d="M7.79954 8.99488C7.88954 8.99599 7.96287 8.92266 7.96398 8.83267V8.83156V7.24609H7.74177H7.63844V8.82934C7.63733 8.91933 7.70955 8.99377 7.79954 8.99488Z" fill="#AB3F2E"/>
+<path d="M9.2414 5.95007C9.95626 5.95007 10.5358 5.37056 10.5358 4.6557C10.5358 3.94084 9.95626 3.36133 9.2414 3.36133C8.52653 3.36133 7.94702 3.94084 7.94702 4.6557C7.94702 5.37056 8.52653 5.95007 9.2414 5.95007Z" fill="white"/>
+<path d="M9.29674 5.21964C9.60355 5.21964 9.85226 4.96695 9.85226 4.65523C9.85226 4.34352 9.60355 4.09082 9.29674 4.09082C8.98993 4.09082 8.74121 4.34352 8.74121 4.65523C8.74121 4.96695 8.98993 5.21964 9.29674 5.21964Z" fill="#422B0D"/>
+<path d="M7.01401 4.88431L7.0029 4.86653C6.99068 4.84653 6.97735 4.82653 6.96291 4.80765C6.91402 4.7432 6.86069 4.6821 6.80291 4.62543C6.72514 4.55099 6.64181 4.481 6.55515 4.41767C6.50738 4.38322 6.45738 4.34656 6.40516 4.31323C6.35294 4.2799 6.30072 4.24879 6.24294 4.21435C6.18517 4.1799 6.13184 4.15546 6.07851 4.12768C6.02518 4.09991 5.9674 4.07658 5.91185 4.05213C5.81075 4.00769 5.70742 3.97103 5.60076 3.94103C5.52298 3.91992 5.44299 3.90547 5.36299 3.89659H5.29188H5.26633C5.16522 3.89325 5.0819 3.97214 5.07745 4.07213C5.07412 4.15324 5.12634 4.22657 5.20411 4.25212L5.22411 4.25879L5.28855 4.2799C5.33077 4.29434 5.39188 4.31656 5.46743 4.34878C5.54298 4.381 5.62964 4.421 5.72297 4.46655L5.8663 4.54099C5.91518 4.56655 5.96185 4.5921 6.01518 4.62321L6.04518 4.64099L5.94518 4.65099C5.9063 4.65765 5.88852 4.65988 5.85185 4.66765C5.81519 4.67543 5.78408 4.68099 5.75408 4.68876C5.69186 4.70432 5.63187 4.72432 5.57187 4.74654C5.4641 4.78653 5.36188 4.83987 5.26744 4.90431C5.22855 4.93097 5.19189 4.96097 5.15634 4.99208C5.12856 5.01652 5.10189 5.04319 5.07745 5.07096C5.05634 5.0943 5.0419 5.11429 5.03079 5.12763L5.01523 5.14874C4.95524 5.22984 4.9719 5.34317 5.05301 5.40317C5.11745 5.45094 5.20633 5.45094 5.27077 5.40317L5.29077 5.38872L5.30411 5.37872L5.34077 5.35206C5.38743 5.32095 5.43632 5.29206 5.48743 5.26762C5.56298 5.23207 5.64187 5.20207 5.72186 5.17762C5.7663 5.16429 5.81408 5.15318 5.86297 5.14207C5.88741 5.1354 5.91074 5.13207 5.93296 5.12763C5.95518 5.12318 5.99296 5.11874 6.01185 5.11541C6.10962 5.10207 6.2085 5.09541 6.30739 5.09541C6.39071 5.09652 6.47515 5.10429 6.55737 5.11874C6.59293 5.1254 6.62515 5.13096 6.65181 5.13874C6.67514 5.14429 6.69737 5.15096 6.71959 5.15874L6.74181 5.16429L6.76514 5.17429L6.78403 5.18318C6.85958 5.2154 6.94735 5.19429 6.99957 5.13096C7.02513 5.09985 7.03957 5.05985 7.03957 5.01986C7.04846 4.97319 7.03957 4.9243 7.01401 4.88431Z" fill="#422B0D"/>
+<defs>
+<linearGradient id="paint0_linear_2537_14037" x1="7.74612" y1="9.3679" x2="7.74612" y2="6.63036" gradientUnits="userSpaceOnUse">
+<stop stop-color="#404040"/>
+<stop offset="0.12" stop-color="#3E3A35"/>
+<stop offset="0.44" stop-color="#392D1E"/>
+<stop offset="0.74" stop-color="#362510"/>
+<stop offset="1" stop-color="#35220B"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2537_14037" x1="7.80158" y1="10.6199" x2="7.80158" y2="7.17676" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF4081"/>
+<stop offset="0.28" stop-color="#FB3D80"/>
+<stop offset="0.55" stop-color="#EF337D"/>
+<stop offset="0.82" stop-color="#DB2378"/>
+<stop offset="1" stop-color="#CA1573"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/happy.svg b/examples/bedtime-story-teller/assets/img/happy.svg
new file mode 100644
index 0000000..9386521
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/happy.svg
@@ -0,0 +1,19 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.9131 14.0865C4.81326 14.0865 1.46899 12.1422 1.46899 7.87579C1.46899 3.60937 4.81326 1.66504 7.9131 1.66504C9.63523 1.66504 11.224 2.23167 12.4017 3.26495C13.6795 4.39822 14.3572 5.99812 14.3572 7.87579C14.3572 9.75346 13.6795 11.3423 12.4017 12.4755C11.2218 13.5088 9.62412 14.0865 7.9131 14.0865Z" fill="url(#paint0_radial_3036_918)"/>
+<path d="M5.77751 5.43555C5.31198 5.43555 4.88867 5.82886 4.88867 6.48215C4.88867 7.13545 5.31198 7.52765 5.77751 7.52765C6.24416 7.52765 6.66636 7.13434 6.66636 6.48215C6.66636 5.82997 6.2486 5.43555 5.77751 5.43555Z" fill="#422B0D"/>
+<path d="M5.73883 5.87293C5.58107 5.79738 5.39108 5.86404 5.31441 6.02181C5.25553 6.14514 5.28219 6.29291 5.38108 6.38846C5.53885 6.46401 5.72883 6.39735 5.8055 6.23958C5.86438 6.11625 5.83772 5.96848 5.73883 5.87293Z" fill="#896024"/>
+<path d="M10.0441 5.43555C9.57858 5.43555 9.15527 5.82886 9.15527 6.48215C9.15527 7.13545 9.57858 7.52765 10.0441 7.52765C10.5096 7.52765 10.933 7.13434 10.933 6.48215C10.933 5.82997 10.5096 5.43555 10.0441 5.43555Z" fill="#422B0D"/>
+<path d="M9.99982 5.87293C9.84205 5.79738 9.65206 5.86404 9.5754 6.02181C9.51651 6.14514 9.54318 6.29291 9.64206 6.38846C9.79983 6.46401 9.98982 6.39735 10.0665 6.23958C10.1254 6.11625 10.0987 5.96848 9.99982 5.87293Z" fill="#896024"/>
+<path d="M13.2762 4.18457C13.8684 5.14007 14.1773 6.27778 14.1773 7.54327C14.1773 9.42094 13.4995 11.0097 12.2218 12.143C11.0441 13.1763 9.4442 13.754 7.73318 13.754C5.72662 13.754 3.62228 12.9374 2.38013 11.2053C3.57562 13.1674 5.82439 14.0873 7.95539 14.0873C9.66641 14.0873 11.2663 13.5096 12.444 12.4763C13.7217 11.343 14.3995 9.75425 14.3995 7.87658C14.3995 6.46111 14.014 5.2034 13.2762 4.18457Z" fill="#EB8F00"/>
+<path d="M12.2298 8.84584C12.0743 8.56474 11.7365 8.44142 11.4365 8.55474C10.2966 8.88695 9.11444 9.05249 7.92672 9.04694C6.73901 9.05249 5.55685 8.88695 4.41691 8.55474C4.11803 8.44142 3.78028 8.56363 3.62473 8.84361C3.47362 9.12249 3.58251 9.4458 3.71028 9.72467C4.42357 11.2913 5.99571 12.229 7.91783 12.2345H7.93561C9.85773 12.2345 11.4299 11.2913 12.1443 9.72467C12.2709 9.44358 12.3809 9.12471 12.2298 8.84584Z" fill="#422B0D"/>
+<path d="M9.70531 11.7908C9.6642 11.753 9.62198 11.7186 9.57976 11.6797C9.12645 11.2808 8.53981 11.0664 7.9354 11.0786C7.31321 11.0686 6.70769 11.2753 6.22216 11.6641C6.17994 11.6986 6.1355 11.7319 6.09439 11.7752C6.05328 11.8186 6.03106 11.8497 6.00439 11.8864C6.61547 12.1252 7.26655 12.2474 7.92318 12.2441H7.94096C8.56981 12.2441 9.19311 12.1319 9.78197 11.9108C9.75975 11.8686 9.7342 11.8286 9.70531 11.7908Z" fill="#ED7770"/>
+<path d="M11.4366 8.55521C10.2967 8.88741 9.11455 9.05296 7.92683 9.04741C6.73912 9.05296 5.55696 8.88741 4.41702 8.55521C4.11815 8.44188 3.78039 8.5641 3.62484 8.84408C3.60262 8.8863 3.58484 8.93075 3.57373 8.9763C3.6104 8.99519 3.65262 9.01407 3.70261 9.03407C5.04032 9.70403 6.51913 10.044 8.01461 10.0262C9.44897 10.0429 10.8667 9.7307 12.1622 9.11518C12.2144 9.09296 12.2577 9.07185 12.2966 9.05185C12.2877 8.97963 12.2644 8.90852 12.2299 8.84408C12.0744 8.5641 11.7366 8.44077 11.4366 8.55521Z" fill="white"/>
+<path d="M12.2343 8.84695C12.0765 8.56585 11.7376 8.44142 11.4354 8.55474C10.2955 8.88695 9.11332 9.05249 7.92672 9.04694C6.73901 9.05249 5.55685 8.88695 4.41691 8.55474C4.11803 8.44142 3.78028 8.56363 3.62473 8.84361C3.47362 9.12249 3.58251 9.4458 3.71028 9.72467C3.76694 9.85022 3.83027 9.97355 3.90027 10.0924C3.90027 10.0924 3.66695 9.22804 3.86916 8.97694C3.93804 8.87028 4.05359 8.80362 4.18025 8.79695C4.23247 8.79695 4.28358 8.80584 4.33358 8.82139C5.49352 9.16249 6.69679 9.3347 7.90672 9.33248H7.94561C9.15554 9.3347 10.3588 9.16249 11.5188 8.82139C11.5687 8.80584 11.6199 8.79695 11.6721 8.79695C11.7987 8.80362 11.9154 8.87028 11.9843 8.97694C12.1898 9.22804 11.9532 10.0958 11.9532 10.0958C12.0221 9.97688 12.0909 9.85467 12.1487 9.72801C12.2754 9.44913 12.3854 9.12693 12.2343 8.84695Z" fill="#EB8F00"/>
+<defs>
+<radialGradient id="paint0_radial_3036_918" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.9131 7.87579) scale(6.32852 6.32849)">
+<stop offset="0.5" stop-color="#FDE030"/>
+<stop offset="0.92" stop-color="#F7C02B"/>
+<stop offset="1" stop-color="#F4A223"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/hope.svg b/examples/bedtime-story-teller/assets/img/hope.svg
new file mode 100644
index 0000000..bb1bf77
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/hope.svg
@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.95509 14.0865C4.85525 14.0865 1.51099 12.1422 1.51099 7.87579C1.51099 3.60937 4.85525 1.66504 7.95509 1.66504C9.67722 1.66504 11.266 2.23167 12.4437 3.26495C13.7214 4.39822 14.3992 5.99812 14.3992 7.87579C14.3992 9.75346 13.7214 11.3423 12.4437 12.4755C11.266 13.5088 9.66611 14.0865 7.95509 14.0865Z" fill="url(#paint0_radial_3036_1017)"/>
+<path d="M13.276 4.18457C13.8682 5.14007 14.177 6.27778 14.177 7.54327C14.177 9.42094 13.4993 11.0097 12.2216 12.143C11.0439 13.1763 9.44395 13.754 7.73293 13.754C5.72637 13.754 3.62204 12.9374 2.37988 11.2053C3.57537 13.1674 5.82414 14.0873 7.95514 14.0873C9.66616 14.0873 11.2661 13.5096 12.4438 12.4763C13.7215 11.343 14.3992 9.75425 14.3992 7.87658C14.3992 6.46111 14.0137 5.2034 13.276 4.18457Z" fill="#EB8F00"/>
+<path d="M7.99966 12.109C7.05082 12.109 6.37419 11.4101 6.16976 11.0223C6.09199 10.8912 6.07754 10.7313 6.12865 10.5879C6.15976 10.5024 6.24198 10.4446 6.33308 10.4424C6.36419 10.4435 6.39419 10.449 6.42308 10.4602C6.90083 10.6479 7.3197 10.9201 8.00522 10.9201C8.69074 10.9201 9.11627 10.6479 9.58736 10.4602C9.61624 10.449 9.64624 10.4424 9.67735 10.4424C9.76735 10.4468 9.84512 10.5035 9.87623 10.5879C9.92734 10.7313 9.91289 10.8912 9.83512 11.0223C9.62513 11.4101 8.9485 12.109 7.99966 12.109Z" fill="#422B0D"/>
+<path d="M6.38972 6.92702L6.3675 6.94924C6.34973 6.96924 6.33084 6.98813 6.31084 7.00479L6.23418 7.06812C6.20196 7.09256 6.16529 7.11923 6.12307 7.14589C6.08085 7.17256 6.03752 7.19811 5.98974 7.22256C5.94086 7.247 5.88975 7.26811 5.83753 7.28589C5.78309 7.30255 5.72754 7.31589 5.67087 7.327C5.6131 7.33588 5.55532 7.34033 5.49644 7.34033H5.44422C5.41533 7.34033 5.40978 7.34033 5.39867 7.34033L5.32089 7.33033C5.26423 7.31922 5.20868 7.30589 5.15423 7.28922C5.1009 7.26922 5.04979 7.24589 4.9998 7.21922C4.95202 7.19478 4.90758 7.16812 4.86647 7.14256C4.80092 7.09923 4.73981 7.05034 4.68204 6.99701L4.61204 6.93257L4.58426 6.9048C4.44205 6.7748 4.22762 6.76703 4.07651 6.88591C3.96652 6.97035 3.92985 7.12145 3.98985 7.247L4.00652 7.28033C4.02096 7.31255 4.03763 7.34366 4.0554 7.37366C4.16984 7.56476 4.32539 7.72808 4.50982 7.85363C4.5976 7.91474 4.69092 7.96696 4.7887 8.00918C4.89647 8.05695 5.00757 8.09362 5.12201 8.12028C5.18312 8.13139 5.23978 8.1425 5.31423 8.14917C5.34867 8.14917 5.38867 8.15584 5.40644 8.15584H5.4931C5.61754 8.15361 5.74087 8.14139 5.86308 8.11695C5.97752 8.09029 6.08863 8.05362 6.1964 8.00585C6.29417 7.96363 6.3875 7.91141 6.47527 7.8503C6.61304 7.75697 6.73526 7.64142 6.83637 7.50921L6.8897 7.43477L6.93414 7.36477C6.9508 7.33811 6.96525 7.30922 6.97747 7.27922L6.98969 7.25144C7.05635 7.09256 6.9808 6.90924 6.82192 6.84258C6.81081 6.83813 6.7997 6.83369 6.78859 6.83147C6.6486 6.78703 6.49416 6.82369 6.38972 6.92702Z" fill="#422B0D"/>
+<path d="M11.3895 6.92702L11.3673 6.94924C11.3495 6.96924 11.3306 6.98813 11.3106 7.00479L11.2339 7.06812C11.2017 7.09256 11.165 7.11923 11.1228 7.14589C11.0806 7.17256 11.0373 7.19811 10.9895 7.22256C10.9406 7.247 10.8895 7.26811 10.8373 7.28589C10.7828 7.30255 10.7273 7.31589 10.6706 7.327C10.6129 7.33588 10.5551 7.34033 10.4962 7.34033H10.444C10.4151 7.34033 10.4095 7.34033 10.3984 7.34033L10.3206 7.33033C10.264 7.31922 10.2084 7.30589 10.154 7.28922C10.1007 7.26922 10.0496 7.24589 9.99955 7.21922C9.95178 7.19478 9.90734 7.16812 9.86623 7.14256C9.80067 7.09923 9.73957 7.05034 9.68179 6.99701L9.6118 6.93257L9.58402 6.9048C9.4418 6.7748 9.22737 6.76703 9.07627 6.88591C8.96627 6.97035 8.92961 7.12145 8.98961 7.247L9.00627 7.28033C9.02072 7.31255 9.03738 7.34366 9.05516 7.37366C9.1696 7.56476 9.32514 7.72808 9.50958 7.85363C9.59735 7.91474 9.69068 7.96696 9.78845 8.00918C9.89734 8.05695 10.0107 8.09473 10.1273 8.12028C10.1884 8.13139 10.2451 8.1425 10.3195 8.14917C10.354 8.14917 10.394 8.15584 10.4118 8.15584H10.4984C10.6229 8.15361 10.7462 8.14139 10.8684 8.11695C10.9851 8.0914 11.0984 8.05362 11.2073 8.00585C11.305 7.96363 11.3984 7.91141 11.4861 7.8503C11.6239 7.75697 11.7461 7.64142 11.8472 7.50921L11.9006 7.43477L11.945 7.36477C11.9617 7.33811 11.9761 7.30922 11.9883 7.27922L12.0006 7.25144C12.0672 7.09256 11.9917 6.90924 11.8328 6.84258C11.8217 6.83813 11.8106 6.83369 11.7995 6.83147C11.6561 6.78147 11.4961 6.81925 11.3895 6.92702Z" fill="#422B0D"/>
+<path d="M4.04634 5.69512C3.96857 5.77622 3.83857 5.77956 3.75747 5.70067C3.68414 5.63068 3.67414 5.51624 3.73302 5.43402C3.85746 5.25625 4.00967 5.0996 4.18522 4.97071C4.65075 4.61185 5.23405 4.44186 5.81958 4.4963C6.09512 4.53074 6.04179 4.88294 5.79625 4.90627C5.1385 4.95849 4.52076 5.23737 4.04634 5.69512Z" fill="#422B0D"/>
+<path d="M11.8313 5.69512C11.9091 5.77622 12.0391 5.77956 12.1202 5.70067C12.1935 5.63068 12.2035 5.51624 12.1446 5.43402C12.0202 5.25625 11.868 5.0996 11.6924 4.97071C11.2269 4.61185 10.6436 4.44186 10.0581 4.4963C9.78254 4.53074 9.83587 4.88294 10.0814 4.90627C10.7392 4.95849 11.3569 5.23737 11.8313 5.69512Z" fill="#422B0D"/>
+<defs>
+<radialGradient id="paint0_radial_3036_1017" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.95509 7.87579) scale(6.32852 6.32849)">
+<stop offset="0.5" stop-color="#FDE030"/>
+<stop offset="0.92" stop-color="#F7C02B"/>
+<stop offset="1" stop-color="#F4A223"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/logo.svg b/examples/bedtime-story-teller/assets/img/logo.svg
new file mode 100644
index 0000000..0afb3af
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/logo.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #25C2C7;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="m321.63091,200.00631c0-31.86875-26.88137-57.79426-59.92217-57.79426-3.05056,0-6.15092.20783-9.21807.65256-25.67613,3.66141-42.85724,22.13104-52.47436,36.29476-9.65046-14.16373-26.83158-32.63335-52.49947-36.29476-3.06716-.44473-6.17588-.65256-9.21807-.65256-33.05725,0-59.93039,25.92551-59.93039,57.79426,0,31.87272,26.87314,57.78164,59.90543,57.78164,3.06716,0,6.17588-.19125,9.24304-.6317,25.6679-3.68226,42.84901-22.16012,52.49947-36.33649,9.61713,14.17637,26.79824,32.65423,52.47436,36.33649,3.06716.44046,6.16751.6317,9.24304.6317,33.03243,0,59.8972-25.90892,59.8972-57.78164m-177.02321,36.85584c-2.09471.30344-4.23098.46131-6.33392.46131-21.72787,0-39.41599-16.75721-39.41599-37.31715,0-20.57256,17.68812-37.3298,39.44096-37.3298,2.08634,0,4.21424.17035,6.31718.45722,24.1883,3.45359,39.00048,27.30936,44.02106,36.8601-5.0288,9.57556-19.83276,33.41885-44.02929,36.86833m66.77118-36.85584c5.02057-9.56322,19.82439-33.419,44.01269-36.87258,2.09471-.28686,4.23921-.45722,6.31718-.45722,21.74461,0,39.43273,16.75723,39.43273,37.3298,0,20.55994-17.68812,37.31715-39.40777,37.31715-2.09457,0-4.23084-.15787-6.34214-.46131-24.1883-3.44947-39.00871-27.31362-44.01269-36.85584"/>
+    <rect class="cls-1" x="121.78254" y="194.35815" width="35.98326" height="11.59537"/>
+    <polygon class="cls-1" points="265.69856 205.95352 277.85924 205.95352 277.85924 194.35815 265.69856 194.35815 265.69856 182.1559 254.07 182.1559 254.07 194.35815 241.89272 194.35815 241.89272 205.95352 254.07 205.95352 254.07 218.15576 265.69856 218.15576 265.69856 205.95352"/>
+  </g>
+  <g>
+    <path class="cls-1" d="m316.62758,149.23299c.36703-.18033.64212-.42629.84221-.74188.19184-.31561.29189-.67629.29189-1.05735,0-.59849-.21674-1.1231-.65037-1.56155-.42523-.43858-1.15915-.6641-2.20145-.6641-.39193,0-.74217.00825-1.0507.02882-.30854.02043-.60028.04505-.88391.08198v6.29123h1.60943v-2.06154h.65037l1.1257,2.06154h1.83457l-1.56773-2.37715Zm-1.60929-.85254c-.21689,0-.38354-.01231-.48373-.0491v-1.69277c.10019-.03274.28363-.0533.53368-.0533.68382,0,1.02566.29519,1.02566.89759,0,.60254-.35849.89759-1.07561.89759Z"/>
+    <path class="cls-1" d="m315.23164,142.2129c-3.53601,0-6.4,2.86396-6.4,6.4,0,3.53198,2.86399,6.4,6.4,6.4,3.53198,0,6.4-2.86802,6.4-6.4,0-3.53604-2.86802-6.4-6.4-6.4Zm0,11.37598c-2.68401,0-4.86001-2.22803-4.86001-4.97598s2.176-4.98003,4.86001-4.98003c2.68,0,4.85598,2.23198,4.85598,4.98003s-2.17598,4.97598-4.85598,4.97598Z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/magic.svg b/examples/bedtime-story-teller/assets/img/magic.svg
new file mode 100644
index 0000000..a865312
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/magic.svg
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M4.34888 13.1725C4.34888 12.6947 5.01674 11.0071 5.01674 11.0071C5.66015 10.8082 10.3063 10.9771 11.0142 10.9771C11.0142 10.9771 11.6542 12.347 11.6542 13.1725C11.6542 13.998 9.68955 14.6669 8.00822 14.6669C6.3269 14.6669 4.34888 13.998 4.34888 13.1725Z" fill="#8B5738"/>
+<path d="M8.00813 12.5836C9.66826 12.5836 11.0141 11.9991 11.0141 11.2781C11.0141 10.5571 9.66826 9.97266 8.00813 9.97266C6.348 9.97266 5.0022 10.5571 5.0022 11.2781C5.0022 11.9991 6.348 12.5836 8.00813 12.5836Z" fill="#FFB17A"/>
+<path d="M5.18599 12.6842C5.52158 12.8753 6.05276 12.8608 6.46504 12.9353C6.98955 13.0308 7.28625 13.4308 8.29749 13.413C8.65864 13.4063 9.50097 13.3652 9.4543 13.3663C9.42541 13.3075 9.26094 13.2508 8.9409 13.2008C8.64753 13.1541 8.43639 13.1586 8.09635 13.1586C7.83632 13.1586 7.47961 13.0808 7.11956 12.883C6.9551 12.793 6.69951 12.693 6.44948 12.6419C6.06499 12.5631 5.79718 12.6464 5.26044 12.3919C5.00374 12.2708 4.79594 12.0197 4.74704 11.7275L4.62036 12.092C4.78705 12.3975 4.93929 12.5442 5.18599 12.6842Z" fill="#CC8552"/>
+<path d="M10.7169 12.3851C9.85697 12.9317 9.13034 12.8706 9.13034 12.8706C9.06923 12.9106 9.57032 13.0184 9.94252 12.9561C10.6736 12.8339 11.118 12.4673 11.4069 11.9762C11.3669 11.8518 11.2791 11.6162 11.2791 11.6162C11.1958 11.8173 11.0991 12.1417 10.7169 12.3851Z" fill="#CC8552"/>
+<path d="M9.16931 13.9365C8.6937 14.0231 8.23808 13.8754 7.77025 13.7654C7.12906 13.6154 5.92446 13.6365 5.92446 13.6365C5.85223 13.672 6.49231 13.9043 6.80346 13.9309C7.08683 13.9554 7.38687 13.9309 7.65579 14.0409C8.03472 14.1953 8.40144 14.2731 8.76815 14.2731C9.4649 14.2731 10.375 13.8531 10.5917 13.3076C10.5917 13.3076 10.1939 13.5409 9.88495 13.6976C9.66048 13.812 9.41823 13.892 9.16931 13.9365Z" fill="#A86D44"/>
+<path d="M4.86947 13.2765C4.96391 13.4276 5.06057 13.5676 5.18723 13.6932C5.40166 13.9065 5.67276 14.0298 5.84719 13.9987C5.84719 13.9987 5.22945 13.4999 5.295 13.3699C5.32833 13.3032 6.61049 13.4087 6.61049 13.4087C6.61049 13.4087 6.22162 13.2043 5.84275 13.131C5.59721 13.0832 5.14834 13.1788 4.73947 12.891C4.51393 12.7321 4.47949 12.541 4.47949 12.541C4.47949 12.541 4.39838 12.8177 4.38171 12.9232C4.61837 13.171 4.83836 13.2265 4.86947 13.2765Z" fill="#A86D44"/>
+<path d="M11.3682 12.7276C11.1437 12.9287 10.7893 13.3353 10.7893 13.5453C10.7893 13.5453 11.1871 13.1598 11.4548 12.9831C11.5215 12.9398 11.5693 12.8842 11.6215 12.8253C11.6215 12.8253 11.5948 12.6265 11.5526 12.4854C11.5359 12.5798 11.4682 12.6387 11.3682 12.7276Z" fill="#A86D44"/>
+<path d="M8.00207 12.1699C10.9946 12.1699 13.4205 9.744 13.4205 6.75147C13.4205 3.75893 10.9946 1.33301 8.00207 1.33301C5.00954 1.33301 2.58362 3.75893 2.58362 6.75147C2.58362 9.744 5.00954 12.1699 8.00207 12.1699Z" fill="url(#paint0_radial_2527_6043)"/>
+<path d="M8.00207 12.1699C10.9946 12.1699 13.4205 9.744 13.4205 6.75147C13.4205 3.75893 10.9946 1.33301 8.00207 1.33301C5.00954 1.33301 2.58362 3.75893 2.58362 6.75147C2.58362 9.744 5.00954 12.1699 8.00207 12.1699Z" fill="url(#paint1_radial_2527_6043)"/>
+<path opacity="0.7" d="M5.99157 3.37443C6.49608 3.41776 7.52954 3.79559 6.77722 4.7646C6.28272 5.40135 5.66486 5.99364 5.44595 6.50593C4.81365 7.98723 6.39829 8.59175 6.89057 8.74621C7.31729 8.88067 8.13962 9.18071 8.37076 9.56409C9.26309 11.0421 6.54942 11.4454 6.54942 11.4454C6.54942 11.4454 8.54633 12.1733 10.191 11.0609C10.8133 10.6398 11.3611 9.65966 10.8255 8.77733C10.5655 8.3495 9.84872 7.96389 9.67314 7.8261C8.92194 7.23269 8.45855 6.61928 8.83193 5.93141C8.98306 5.6536 9.29865 5.50914 9.60424 5.42468C10.4599 5.18799 11.5278 5.23021 11.8067 4.17342C12.0479 3.26219 10.2877 1.22638 7.55732 1.55753C6.42385 1.69421 5.40372 2.16872 4.56917 2.94882C3.02898 4.39011 3.16233 5.58248 3.16233 5.58248C3.16233 5.58248 4.16579 3.21552 5.99157 3.37443Z" fill="url(#paint2_linear_2527_6043)"/>
+<path opacity="0.39" d="M11.9769 3.57966C11.5901 3.01736 11.0556 2.57064 10.4922 2.18504C9.59323 1.57051 8.43086 1.52051 8.43086 1.52051C9.85771 2.20282 9.69769 3.10737 9.23207 3.75412C8.66533 4.542 7.52853 5.07429 7.23182 6.0333C7.05847 6.59337 7.16515 7.18233 7.71077 7.54015C8.25639 7.89798 10.22 8.84809 10.2878 9.97268C10.3389 10.8195 9.66546 11.3529 9.66546 11.3529C10.4533 11.1828 12.1113 10.0227 11.6201 8.8292C11.3823 8.25135 10.3011 7.86797 10.8456 7.209C11.0479 6.96341 12.4603 6.83229 12.5925 5.40322C12.6536 4.73536 12.2936 4.03971 11.9769 3.57966Z" fill="url(#paint3_linear_2527_6043)"/>
+<path opacity="0.85" d="M3.6352 7.74028C3.6352 7.74028 2.82413 5.5889 4.4896 3.59643C5.86175 1.954 7.10057 2.61853 6.90947 3.31861C6.71726 4.0187 6.12063 4.23428 5.22178 4.93771C4.03407 5.86671 3.6352 7.74028 3.6352 7.74028Z" fill="url(#paint4_linear_2527_6043)"/>
+<path d="M11.2191 4.75241C11.0025 4.64463 10.8292 4.50909 10.7536 4.2791L10.4325 3.21582L10.1114 4.2791C10.0359 4.50797 9.86144 4.64463 9.64589 4.75241L9.10925 4.98462L9.66145 5.21349C9.8781 5.32127 10.0359 5.46904 10.1125 5.69791L10.4336 6.7523L10.7547 5.69791C10.8303 5.46904 10.9892 5.32127 11.2058 5.21349L11.758 4.98462L11.2191 4.75241Z" fill="url(#paint5_linear_2527_6043)"/>
+<path d="M10.1472 8.59713C9.93059 8.48936 9.75726 8.35381 9.68171 8.12382L9.36062 7.06055L9.03952 8.12382C8.96397 8.3527 8.78954 8.48936 8.57399 8.59713L8.03735 8.82934L8.58955 9.05822C8.8062 9.16599 8.96397 9.31376 9.04063 9.54264L9.36173 10.597L9.68282 9.54264C9.75837 9.31376 9.91725 9.16599 10.1339 9.05822L10.6861 8.82934L10.1472 8.59713Z" fill="url(#paint6_linear_2527_6043)"/>
+<path d="M12.7064 6.8865C12.5431 6.8054 12.412 6.70207 12.3542 6.52985L12.112 5.72656L11.8698 6.52985C11.812 6.70318 11.6809 6.8054 11.5176 6.8865L11.1132 7.06205L11.5298 7.23537C11.6931 7.31648 11.8131 7.42759 11.8698 7.60091L12.112 8.39642L12.3542 7.60091C12.412 7.42759 12.5309 7.31648 12.6942 7.23537L13.1108 7.06205L12.7064 6.8865Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial_2527_6043" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.76238 3.33391) rotate(-3.7268) scale(8.46604 8.46604)">
+<stop offset="0.1041" stop-color="#CE93D8"/>
+<stop offset="1" stop-color="#AB47BC"/>
+</radialGradient>
+<radialGradient id="paint1_radial_2527_6043" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.8185 6.01522) scale(7.71088 7.71088)">
+<stop offset="0.2804" stop-color="#81D4FA" stop-opacity="0"/>
+<stop offset="0.9643" stop-color="#81D4FA" stop-opacity="0.9"/>
+</radialGradient>
+<linearGradient id="paint2_linear_2527_6043" x1="9.18977" y1="2.07215" x2="4.88385" y2="13.2242" gradientUnits="userSpaceOnUse">
+<stop stop-color="#673AB7"/>
+<stop offset="0.9367" stop-color="#673AB7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2527_6043" x1="9.87751" y1="3.65899" x2="9.87751" y2="12.8983" gradientUnits="userSpaceOnUse">
+<stop offset="0.2348" stop-color="#1D44B3"/>
+<stop offset="0.8842" stop-color="#2044B3" stop-opacity="0.074"/>
+<stop offset="0.936" stop-color="#2144B3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2527_6043" x1="4.53787" y1="2.71959" x2="5.50795" y2="6.33495" gradientUnits="userSpaceOnUse">
+<stop offset="0.2271" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2527_6043" x1="10.4315" y1="4.10692" x2="10.4315" y2="6.70977" gradientUnits="userSpaceOnUse">
+<stop offset="0.2614" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2527_6043" x1="9.35962" y1="7.35172" x2="9.35962" y2="10.3593" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/misterious.svg b/examples/bedtime-story-teller/assets/img/misterious.svg
new file mode 100644
index 0000000..ca96938
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/misterious.svg
@@ -0,0 +1,38 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.95509 14.0865C4.85525 14.0865 1.51099 12.1422 1.51099 7.87579C1.51099 3.60937 4.85525 1.66504 7.95509 1.66504C9.67722 1.66504 11.266 2.23167 12.4437 3.26495C13.7214 4.39822 14.3992 5.99812 14.3992 7.87579C14.3992 9.75346 13.7214 11.3423 12.4437 12.4755C11.266 13.5088 9.66611 14.0865 7.95509 14.0865Z" fill="url(#paint0_radial_3036_939)"/>
+<path d="M13.2757 4.18457C13.8679 5.14007 14.1768 6.27778 14.1768 7.54327C14.1768 9.42094 13.499 11.0097 12.2213 12.143C11.0436 13.1763 9.44371 13.754 7.73269 13.754C5.72613 13.754 3.61735 12.9374 2.37964 11.2053C3.57513 13.1674 5.82279 14.0873 7.9549 14.0873C9.66592 14.0873 11.2658 13.5096 12.4435 12.4763C13.7213 11.343 14.399 9.75425 14.399 7.87658C14.399 6.46111 14.0135 5.2034 13.2757 4.18457Z" fill="#EB8F00"/>
+<path d="M9.14344 3.60663C9.24344 3.51775 9.34343 3.43997 9.45454 3.3622C9.56564 3.28443 9.68786 3.22887 9.79896 3.16221C10.0434 3.05111 10.31 2.94 10.6323 2.92889C10.71 2.91778 10.7878 2.94 10.8767 2.94C10.9545 2.94 11.0433 2.97333 11.1211 2.99556C11.1433 3.00667 11.1656 3.00667 11.1767 3.01778L11.2322 3.05111L11.3433 3.10666C11.41 3.1511 11.4767 3.20665 11.5433 3.26221C11.6655 3.37331 11.7433 3.51775 11.81 3.65107C11.8433 3.71774 11.8655 3.7844 11.8877 3.85106C11.91 3.91772 11.9211 3.98439 11.9322 4.02883L11.9433 4.06216C11.9655 4.19549 11.8766 4.32881 11.7433 4.35103C11.6322 4.37325 11.5322 4.3177 11.4767 4.22882C11.4433 4.16215 11.41 4.1066 11.3878 4.06216C11.3655 4.01772 11.3322 3.97328 11.31 3.92883C11.2544 3.85106 11.1878 3.7844 11.1211 3.72885C11.11 3.71774 11.0878 3.70663 11.0656 3.69551C11.0433 3.6844 11.0322 3.67329 11.0211 3.66218C10.9989 3.65107 10.9878 3.65107 10.9656 3.63996L10.9433 3.62885C10.9322 3.62885 10.9211 3.62885 10.91 3.62885C10.8322 3.60663 10.7545 3.59552 10.6656 3.60663C10.4878 3.60663 10.2767 3.67329 10.0656 3.75107C9.96562 3.79551 9.85451 3.83995 9.75452 3.88439C9.65453 3.93995 9.54342 3.98439 9.43231 4.02883L9.41009 4.03994C9.27677 4.09549 9.13233 4.02883 9.08789 3.90661C9.03234 3.79551 9.06567 3.67329 9.14344 3.60663Z" fill="#422B0D"/>
+<path d="M5.9547 5.16324C5.86582 5.18546 5.81026 5.19657 5.73249 5.19657C5.66583 5.19657 5.58805 5.20768 5.52139 5.19657C5.37695 5.19657 5.23252 5.17435 5.09919 5.1299C4.87698 5.07435 4.65477 5.04102 4.46589 5.04102C4.37701 5.04102 4.28812 5.05213 4.22146 5.07435C4.1548 5.09657 4.09924 5.1299 4.04369 5.18546C3.93259 5.29656 3.82148 5.49655 3.71038 5.69654C3.64371 5.81875 3.48817 5.8632 3.36595 5.79653C3.26596 5.74098 3.22151 5.62988 3.23262 5.52988C3.25484 5.40767 3.28818 5.27434 3.33262 5.14101C3.38817 5.00769 3.44372 4.87436 3.55483 4.74104C3.66593 4.60771 3.81037 4.49661 3.97703 4.44105C4.14369 4.3855 4.29923 4.36328 4.45478 4.36328C4.75476 4.37439 5.01031 4.45217 5.25474 4.54105C5.35473 4.57438 5.45473 4.60771 5.55472 4.62993C5.61027 4.64104 5.65472 4.65215 5.71027 4.65215C5.75471 4.65215 5.82137 4.66326 5.85471 4.66326H5.89915C6.03247 4.66326 6.14358 4.78548 6.13247 4.9188C6.14358 5.05213 6.06581 5.14101 5.9547 5.16324Z" fill="#422B0D"/>
+<path d="M5.77729 11.0295C5.97728 10.8073 6.51058 10.5517 7.25499 10.5628C8.24382 10.5851 8.77713 11.0295 8.77713 11.0295C9.09933 11.2961 8.9549 11.7072 8.61047 11.6739C8.05495 11.6072 8.08828 11.5072 7.08833 11.485C6.36615 11.4739 6.02172 11.585 5.98839 11.585C5.7884 11.5961 5.71063 11.5184 5.67729 11.385C5.64396 11.2739 5.67729 11.1295 5.77729 11.0295Z" fill="#422B0D"/>
+<path d="M10.0324 5.75195C10.5213 5.75195 10.9657 6.16304 10.9657 6.85189C10.9657 7.54074 10.5213 7.95183 10.0324 7.95183C9.54354 7.95183 9.09912 7.54074 9.09912 6.85189C9.09912 6.16304 9.54354 5.75195 10.0324 5.75195Z" fill="#422B0D"/>
+<path d="M5.0219 5.94141C4.55526 5.94141 4.13306 6.33027 4.13306 6.98579C4.13306 7.64131 4.55526 8.03018 5.0219 8.03018C5.48854 8.03018 5.91074 7.64131 5.91074 6.98579C5.91074 6.33027 5.48854 5.94141 5.0219 5.94141Z" fill="#422B0D"/>
+<path d="M9.92983 6.25788C9.81539 6.17788 9.64317 6.20344 9.53207 6.36343C9.42096 6.52453 9.45763 6.69341 9.57207 6.7734C9.68651 6.8534 9.85872 6.82784 9.96982 6.66785C10.082 6.50675 10.0443 6.33676 9.92983 6.25788Z" fill="#896024"/>
+<path d="M12.7213 6.43262H12.0991V7.43256H12.7213C13.0213 7.43256 13.3213 7.24368 13.3213 6.95481V6.91037C13.3213 6.61038 13.0213 6.43262 12.7213 6.43262ZM12.6658 7.28812C12.4547 7.28812 12.288 7.12147 12.288 6.92148C12.288 6.72149 12.4547 6.55483 12.6658 6.55483C12.8769 6.55483 13.0435 6.72149 13.0435 6.92148C13.0435 7.12147 12.8769 7.28812 12.6658 7.28812Z" fill="#404040"/>
+<path d="M12.677 8.755C12.6437 8.755 12.6104 8.73278 12.6104 8.69945V8.18836C12.6104 8.15503 12.6326 8.13281 12.6659 8.13281H12.677C12.7103 8.13281 12.7326 8.15503 12.7326 8.18836V8.69945C12.7326 8.72167 12.7103 8.755 12.677 8.755Z" fill="#404040"/>
+<path d="M12.677 9.6007C12.6437 9.6007 12.6104 9.57848 12.6104 9.54515V9.03407C12.6104 9.00074 12.6326 8.97852 12.6659 8.97852H12.677C12.7103 8.97852 12.7326 9.00074 12.7326 9.03407V9.54515C12.7326 9.57848 12.7103 9.6007 12.677 9.6007Z" fill="#404040"/>
+<path d="M12.677 10.4542C12.6437 10.4542 12.6104 10.432 12.6104 10.3987V9.88758C12.6104 9.85425 12.6326 9.83203 12.6659 9.83203H12.677C12.7103 9.83203 12.7326 9.85425 12.7326 9.88758V10.3987C12.7326 10.432 12.7103 10.4542 12.677 10.4542Z" fill="#404040"/>
+<path d="M12.677 11.3097C12.6437 11.3097 12.6104 11.2875 12.6104 11.2541V10.7431C12.6104 10.7097 12.6326 10.6875 12.6659 10.6875H12.677C12.7103 10.6875 12.7326 10.7097 12.7326 10.7431V11.2541C12.7326 11.2875 12.7103 11.3097 12.677 11.3097Z" fill="#404040"/>
+<path d="M12.677 12.1661C12.6437 12.1661 12.6104 12.1439 12.6104 12.1106V11.5995C12.6104 11.5662 12.6326 11.5439 12.6659 11.5439H12.677C12.7103 11.5439 12.7326 11.5662 12.7326 11.5995V12.1106C12.7326 12.1439 12.7103 12.1661 12.677 12.1661Z" fill="#404040"/>
+<path d="M12.677 13.0226C12.6437 13.0226 12.6104 13.0004 12.6104 12.967V12.4559C12.6104 12.4226 12.6326 12.4004 12.6659 12.4004H12.677C12.7103 12.4004 12.7326 12.4226 12.7326 12.4559V12.967C12.7326 13.0004 12.7103 13.0226 12.677 13.0226Z" fill="#404040"/>
+<path d="M12.677 13.8761C12.6437 13.8761 12.6104 13.8539 12.6104 13.8205V13.3095C12.6104 13.2761 12.6326 13.2539 12.6659 13.2539H12.677C12.7103 13.2539 12.7326 13.2761 12.7326 13.3095V13.8205C12.7326 13.8539 12.7103 13.8761 12.677 13.8761Z" fill="#404040"/>
+<path d="M12.677 7.85559C12.6437 7.85559 12.6104 7.83336 12.6104 7.80003V7.28895C12.6104 7.25562 12.6326 7.2334 12.6659 7.2334H12.677C12.7103 7.2334 12.7326 7.25562 12.7326 7.28895V7.80003C12.7326 7.82225 12.7103 7.85559 12.677 7.85559Z" fill="#404040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6769 7.77712C12.5481 7.77712 12.4436 7.88158 12.4436 8.01044C12.4436 8.1393 12.5481 8.24376 12.6769 8.24376C12.8058 8.24376 12.9103 8.1393 12.9103 8.01044C12.9103 7.88158 12.8058 7.77712 12.6769 7.77712ZM12.3325 8.01044C12.3325 7.82022 12.4867 7.66602 12.6769 7.66602C12.8672 7.66602 13.0214 7.82022 13.0214 8.01044C13.0214 8.20066 12.8672 8.35486 12.6769 8.35486C12.4867 8.35486 12.3325 8.20066 12.3325 8.01044Z" fill="#404040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6769 8.63454C12.5481 8.63454 12.4436 8.739 12.4436 8.86786C12.4436 8.99672 12.5481 9.10118 12.6769 9.10118C12.8058 9.10118 12.9103 8.99672 12.9103 8.86786C12.9103 8.739 12.8058 8.63454 12.6769 8.63454ZM12.3325 8.86786C12.3325 8.67764 12.4867 8.52344 12.6769 8.52344C12.8672 8.52344 13.0214 8.67764 13.0214 8.86786C13.0214 9.05808 12.8672 9.21229 12.6769 9.21229C12.4867 9.21229 12.3325 9.05808 12.3325 8.86786Z" fill="#404040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6769 9.47829C12.5481 9.47829 12.4436 9.58275 12.4436 9.71161C12.4436 9.84047 12.5481 9.94493 12.6769 9.94493C12.8058 9.94493 12.9103 9.84047 12.9103 9.71161C12.9103 9.58275 12.8058 9.47829 12.6769 9.47829ZM12.3325 9.71161C12.3325 9.52139 12.4867 9.36719 12.6769 9.36719C12.8672 9.36719 13.0214 9.52139 13.0214 9.71161C13.0214 9.90183 12.8672 10.056 12.6769 10.056C12.4867 10.056 12.3325 9.90183 12.3325 9.71161Z" fill="#404040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6769 10.3318C12.5481 10.3318 12.4436 10.4363 12.4436 10.5651C12.4436 10.694 12.5481 10.7984 12.6769 10.7984C12.8058 10.7984 12.9103 10.694 12.9103 10.5651C12.9103 10.4363 12.8058 10.3318 12.6769 10.3318ZM12.3325 10.5651C12.3325 10.3749 12.4867 10.2207 12.6769 10.2207C12.8672 10.2207 13.0214 10.3749 13.0214 10.5651C13.0214 10.7553 12.8672 10.9096 12.6769 10.9096C12.4867 10.9096 12.3325 10.7553 12.3325 10.5651Z" fill="#404040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6769 11.1775C12.5481 11.1775 12.4436 11.282 12.4436 11.4108C12.4436 11.5397 12.5481 11.6442 12.6769 11.6442C12.8058 11.6442 12.9103 11.5397 12.9103 11.4108C12.9103 11.282 12.8058 11.1775 12.6769 11.1775ZM12.3325 11.4108C12.3325 11.2206 12.4867 11.0664 12.6769 11.0664C12.8672 11.0664 13.0214 11.2206 13.0214 11.4108C13.0214 11.6011 12.8672 11.7553 12.6769 11.7553C12.4867 11.7553 12.3325 11.6011 12.3325 11.4108Z" fill="#404040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6769 12.032C12.5481 12.032 12.4436 12.1365 12.4436 12.2653C12.4436 12.3942 12.5481 12.4986 12.6769 12.4986C12.8058 12.4986 12.9103 12.3942 12.9103 12.2653C12.9103 12.1365 12.8058 12.032 12.6769 12.032ZM12.3325 12.2653C12.3325 12.0751 12.4867 11.9209 12.6769 11.9209C12.8672 11.9209 13.0214 12.0751 13.0214 12.2653C13.0214 12.4555 12.8672 12.6097 12.6769 12.6097C12.4867 12.6097 12.3325 12.4555 12.3325 12.2653Z" fill="#404040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6769 12.8767C12.5481 12.8767 12.4436 12.9812 12.4436 13.11C12.4436 13.2389 12.5481 13.3434 12.6769 13.3434C12.8058 13.3434 12.9103 13.2389 12.9103 13.11C12.9103 12.9812 12.8058 12.8767 12.6769 12.8767ZM12.3325 13.11C12.3325 12.9198 12.4867 12.7656 12.6769 12.7656C12.8672 12.7656 13.0214 12.9198 13.0214 13.11C13.0214 13.3003 12.8672 13.4545 12.6769 13.4545C12.4867 13.4545 12.3325 13.3003 12.3325 13.11Z" fill="#404040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6767 13.7332C12.5478 13.7332 12.4434 13.8376 12.4434 13.9665C12.4434 14.0954 12.5478 14.1998 12.6767 14.1998C12.8056 14.1998 12.91 14.0954 12.91 13.9665C12.91 13.8376 12.8056 13.7332 12.6767 13.7332ZM12.3323 13.9665C12.3323 13.7763 12.4865 13.6221 12.6767 13.6221C12.8669 13.6221 13.0211 13.7763 13.0211 13.9665C13.0211 14.1567 12.8669 14.3109 12.6767 14.3109C12.4865 14.3109 12.3323 14.1567 12.3323 13.9665Z" fill="#404040"/>
+<path d="M9.73261 9.14392C10.9967 9.14392 12.0214 8.11921 12.0214 6.85516C12.0214 5.59112 10.9967 4.56641 9.73261 4.56641C8.46856 4.56641 7.44385 5.59112 7.44385 6.85516C7.44385 8.11921 8.46856 9.14392 9.73261 9.14392Z" fill="#CCCCCC" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.73247 4.76094C8.5758 4.76094 7.63814 5.6986 7.63814 6.85526C7.63814 8.01192 8.5758 8.94959 9.73247 8.94959C10.8891 8.94959 11.8268 8.01192 11.8268 6.85526C11.8268 5.6986 10.8891 4.76094 9.73247 4.76094ZM7.24927 6.85526C7.24927 5.48383 8.36103 4.37207 9.73247 4.37207C11.1039 4.37207 12.2157 5.48383 12.2157 6.85526C12.2157 8.22669 11.1039 9.33845 9.73247 9.33845C8.36103 9.33845 7.24927 8.22669 7.24927 6.85526Z" fill="#404040"/>
+<path d="M11.4213 6.72127C11.3768 6.29908 11.188 5.91021 10.8769 5.64356C10.5658 5.37691 10.1658 5.23247 9.76581 5.23247C9.35472 5.23247 8.95474 5.3658 8.64365 5.62134C8.33255 5.87688 8.13256 6.26575 8.09923 6.68794C8.09923 6.72128 8.0659 6.7435 8.04368 6.73239C8.02146 6.73239 7.99924 6.71016 7.99924 6.67683C7.98813 6.45462 8.03257 6.2213 8.12145 6.0102C8.21034 5.79911 8.34366 5.61023 8.51032 5.44357C8.84364 5.12137 9.32139 4.96582 9.77692 4.96582C10.2436 4.96582 10.6991 5.14359 11.0324 5.46579C11.1991 5.63245 11.3324 5.82133 11.4213 6.03243C11.5102 6.24352 11.5435 6.47684 11.5324 6.69905C11.5324 6.73239 11.5102 6.75461 11.4768 6.75461C11.4435 6.76572 11.4213 6.7435 11.4213 6.72127Z" fill="white"/>
+<path d="M5.00282 6.37409C4.88839 6.29409 4.71617 6.31965 4.60507 6.47964C4.49396 6.63963 4.53063 6.80962 4.64507 6.88961C4.7595 6.96961 4.93172 6.94406 5.04282 6.78406C5.15504 6.62296 5.11837 6.45297 5.00282 6.37409Z" fill="#896024"/>
+<defs>
+<radialGradient id="paint0_radial_3036_939" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.95509 7.87578) scale(6.32852 6.32849)">
+<stop offset="0.5" stop-color="#FDE030"/>
+<stop offset="0.9188" stop-color="#F7C02B"/>
+<stop offset="1" stop-color="#F4A223"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/stars.svg b/examples/bedtime-story-teller/assets/img/stars.svg
new file mode 100644
index 0000000..e694f3f
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/stars.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 10.5C6.27636 10.5 6.5 10.7239 6.5 11C6.5 11.5097 6.58255 11.7462 6.65234 11.8545C6.69723 11.9248 6.76553 11.9999 6.99902 12H7C7.27572 12 7.49974 12.2231 7.5 12.499C7.5 12.7751 7.27636 13 7 13C6.78906 13 6.5 13 6.5 14C6.5 14.2761 6.27636 14.5 6 14.5C5.72364 14.5 5.5 14.2761 5.5 14C5.5 13 5.21094 13 5 13C4.72363 13 4.5 12.7751 4.5 12.499C4.50026 12.2234 4.72526 12 5.00098 12C5.23447 11.9999 5.30277 11.9248 5.34766 11.8545C5.41745 11.7462 5.5 11.5097 5.5 11C5.5 10.7239 5.72364 10.5 6 10.5ZM10.5 1.5C10.7764 1.5 11 1.72387 11 2C11 4.98095 12.374 7.49902 14 7.49902C14.2762 7.49902 14.4997 7.72312 14.5 7.99902C14.5 8.27515 14.2764 8.49902 14 8.49902C12.374 8.49902 11 11.0183 11 14C11 14.2761 10.7764 14.5 10.5 14.5C10.2236 14.5 10 14.2761 10 14C10 11.0183 8.62598 8.49902 7 8.49902C6.72364 8.49902 6.5 8.27515 6.5 7.99902C6.50026 7.72312 6.7238 7.49902 7 7.49902C8.62598 7.49902 10 4.98095 10 2C10 1.72387 10.2236 1.5 10.5 1.5ZM10.5 5.19434C10.0719 6.45274 9.39374 7.4421 8.56738 7.99902C9.39399 8.55617 10.0718 9.54693 10.5 10.8057C10.9282 9.54687 11.6069 8.55615 12.4336 7.99902C11.607 7.44217 10.9282 6.45302 10.5 5.19434ZM3.5 1.5C3.77502 1.5 4 1.72501 4 2C4 2.75501 4.09521 3.29999 4.28027 3.625C4.43524 3.8849 4.65007 4 5 4C5.27502 4 5.5 4.225 5.5 4.5C5.5 4.775 5.27502 5 5 5C4.65002 5 4 5 4 7C4 7.27499 3.77502 7.5 3.5 7.5C3.22497 7.5 3 7.27499 3 7C3 5 2.34997 5 2 5C1.72497 5 1.5 4.775 1.5 4.5C1.5 4.225 1.72497 4 2 4C2.34993 4 2.56476 3.8849 2.71973 3.625C2.90479 3.29999 3 2.75501 3 2C3 1.72501 3.22497 1.5 3.5 1.5Z" fill="#171E21"/>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/storyteller-background.png b/examples/bedtime-story-teller/assets/img/storyteller-background.png
new file mode 100644
index 0000000..2e3c16e
Binary files /dev/null and b/examples/bedtime-story-teller/assets/img/storyteller-background.png differ
diff --git a/examples/bedtime-story-teller/assets/img/sword.svg b/examples/bedtime-story-teller/assets/img/sword.svg
new file mode 100644
index 0000000..00007be
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/sword.svg
@@ -0,0 +1,23 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6028 1.97828L12.6295 2.26604C12.7672 2.2516 13.0205 2.29715 13.3772 2.65491C13.735 3.01267 13.7805 3.26488 13.7661 3.40265L14.0538 3.42931C14.3938 3.46042 14.7016 3.15822 14.6649 2.81934C14.6305 2.50047 14.4649 2.14382 14.176 1.85495C13.8872 1.56719 13.5316 1.40053 13.2117 1.36609C12.8739 1.33053 12.5717 1.6383 12.6028 1.97828Z" fill="#9E740B"/>
+<path d="M10.609 5.42266L9.78687 4.60048L12.6178 2.19172C12.6178 2.19172 12.9334 1.96395 13.5 2.53059C14.0666 3.09723 13.8389 3.41277 13.8389 3.41277L11.4312 6.24373L10.609 5.42266Z" fill="#693928"/>
+<path d="M4.01001 13.3654C2.99322 14.3478 1.33301 14.6367 1.33301 14.6367L10.2763 5.69336L11.2276 6.64459L4.01001 13.3654Z" fill="#82AEC0"/>
+<path d="M2.60428 11.9598C1.62304 12.9777 1.33301 14.6368 1.33301 14.6368L10.2763 5.69342L9.32512 4.74219L2.60428 11.9598Z" fill="#C9E3E6"/>
+<path d="M6.12818 13.5081C6.05707 13.4548 5.98818 13.4293 5.91819 13.4081C5.88708 13.4004 5.85597 13.3948 5.82375 13.3904C5.8193 13.3593 5.81375 13.3281 5.80597 13.2959C5.78597 13.2248 5.75931 13.1559 5.70598 13.0859C5.65265 13.157 5.62709 13.2259 5.60598 13.2959C5.5982 13.3281 5.59265 13.3593 5.5882 13.3915C5.55821 13.3959 5.5271 13.4015 5.4971 13.4093C5.42599 13.4293 5.35711 13.4548 5.28711 13.507C5.35822 13.5592 5.4271 13.5848 5.4971 13.6048C5.52821 13.6137 5.55932 13.6192 5.59043 13.6237C5.59487 13.6548 5.60043 13.6848 5.6082 13.7159C5.6282 13.787 5.65376 13.8559 5.70598 13.9259C5.75931 13.8548 5.78486 13.7859 5.80375 13.7159C5.81153 13.6848 5.81708 13.6548 5.82153 13.6248C5.85263 13.6204 5.88486 13.6148 5.91708 13.6059C5.98818 13.5881 6.05818 13.5615 6.12818 13.5081Z" fill="white"/>
+<path opacity="0.6" d="M6.60464 12.1193C6.66241 12.1115 6.72019 12.0937 6.77907 12.0526C6.72019 12.0104 6.66241 11.9937 6.60464 11.986C6.59686 11.9282 6.57908 11.8704 6.53797 11.8115C6.49575 11.8704 6.47909 11.9282 6.47131 11.986C6.41354 11.9937 6.35576 12.0115 6.29688 12.0526C6.35465 12.0937 6.41242 12.1115 6.47131 12.1193C6.47909 12.1771 6.49686 12.2348 6.53797 12.2937C6.57908 12.2359 6.59686 12.1782 6.60464 12.1193Z" fill="white"/>
+<path d="M9.72819 11.7274C9.61375 11.6418 9.50043 11.5985 9.38599 11.5663C9.33599 11.5529 9.28488 11.5441 9.23488 11.5363C9.22822 11.4863 9.21822 11.4352 9.20489 11.3852C9.17266 11.2707 9.12933 11.1574 9.04378 11.043C8.95823 11.1574 8.9149 11.2707 8.88268 11.3852C8.86935 11.4352 8.86046 11.4863 8.85268 11.5363C8.80268 11.5429 8.75158 11.5529 8.70158 11.5663C8.58714 11.5985 8.47381 11.6418 8.35938 11.7274C8.47381 11.8129 8.58714 11.8563 8.70158 11.8885C8.75158 11.9018 8.80268 11.9107 8.85268 11.9185C8.85935 11.9685 8.86935 12.0196 8.88268 12.0696C8.9149 12.184 8.95823 12.2973 9.04378 12.4118C9.12933 12.2973 9.17266 12.184 9.20489 12.0696C9.21822 12.0196 9.22711 11.9685 9.23488 11.9185C9.28488 11.9118 9.33599 11.9018 9.38599 11.8885C9.49931 11.8574 9.61375 11.8129 9.72819 11.7274Z" fill="white"/>
+<path d="M2.90542 10.8527C2.96319 10.8449 3.02097 10.8271 3.07985 10.786C3.02097 10.7438 2.96319 10.7271 2.90542 10.7194C2.89764 10.6616 2.87986 10.6038 2.83875 10.5449C2.79653 10.6038 2.77987 10.6616 2.77209 10.7194C2.71432 10.7271 2.65654 10.7449 2.59766 10.786C2.65654 10.8271 2.71432 10.8449 2.77209 10.8527C2.77987 10.9105 2.79765 10.9682 2.83875 11.0271C2.87986 10.9682 2.89764 10.9105 2.90542 10.8527Z" fill="white"/>
+<path d="M4.41323 9.35073C4.471 9.34295 4.52878 9.32518 4.58767 9.28407C4.52878 9.24185 4.471 9.22518 4.41323 9.2174C4.40545 9.15963 4.38768 9.10185 4.34657 9.04297C4.30435 9.10185 4.28768 9.15963 4.2799 9.2174C4.22213 9.22518 4.16435 9.24296 4.10547 9.28407C4.16435 9.32518 4.22213 9.34295 4.2799 9.35073C4.28768 9.40851 4.30546 9.46628 4.34657 9.52517C4.38768 9.46739 4.40545 9.40962 4.41323 9.35073Z" fill="white"/>
+<path opacity="0.6" d="M10.8907 9.2842C10.7884 9.20754 10.6862 9.16865 10.584 9.13976C10.5385 9.12754 10.494 9.11976 10.4485 9.1131C10.4418 9.06754 10.434 9.0231 10.4218 8.97755C10.3929 8.87533 10.354 8.77312 10.2774 8.6709C10.2007 8.77312 10.1618 8.87533 10.1329 8.97755C10.1207 9.0231 10.1129 9.06754 10.1063 9.1131C10.0607 9.11976 10.0163 9.12754 9.97071 9.13976C9.8685 9.16865 9.76628 9.20754 9.66406 9.2842C9.76628 9.36086 9.8685 9.39975 9.97071 9.42864C10.0163 9.44086 10.0607 9.44864 10.1063 9.4553C10.1129 9.50085 10.1207 9.5453 10.1329 9.59085C10.1618 9.69307 10.2007 9.79528 10.2774 9.8975C10.354 9.79528 10.3929 9.69307 10.4218 9.59085C10.434 9.5453 10.4418 9.50085 10.4485 9.4553C10.494 9.44864 10.5385 9.44086 10.584 9.42864C10.6862 9.39975 10.7884 9.36086 10.8907 9.2842Z" fill="white"/>
+<path opacity="0.6" d="M3.47877 8.70819C3.37322 8.6282 3.26545 8.58709 3.15879 8.55709C3.11213 8.54487 3.06546 8.53709 3.01769 8.53042C3.01102 8.48265 3.00213 8.43598 2.98991 8.38932C2.9588 8.28377 2.9188 8.176 2.83881 8.06934C2.75881 8.17489 2.7177 8.28266 2.6877 8.38932C2.67548 8.43598 2.6677 8.48376 2.66104 8.53153C2.61437 8.5382 2.5666 8.54709 2.51993 8.55931C2.41438 8.5882 2.30661 8.6282 2.19995 8.7093C2.3055 8.7893 2.41327 8.83041 2.51993 8.85929C2.5666 8.87263 2.61437 8.8804 2.66215 8.88818C2.66882 8.93596 2.6777 8.98262 2.68993 9.02929C2.71881 9.13484 2.75881 9.24261 2.83992 9.34927C2.91991 9.24372 2.96102 9.13595 2.98991 9.02929C3.00324 8.98262 3.01102 8.93596 3.01769 8.88929C3.06546 8.88263 3.11213 8.87374 3.1599 8.86152C3.26434 8.82818 3.37211 8.78819 3.47877 8.70819Z" fill="white"/>
+<path d="M5.50697 7.63203C5.43587 7.5787 5.36698 7.55314 5.29698 7.53203C5.26587 7.52425 5.23365 7.5187 5.20254 7.51425C5.1981 7.48315 5.19254 7.45204 5.18477 7.42093C5.16477 7.34982 5.1381 7.28093 5.08477 7.21094C5.03144 7.28204 5.00589 7.35093 4.98478 7.42093C4.977 7.45204 4.97145 7.48426 4.967 7.51537C4.937 7.51981 4.90589 7.52537 4.87478 7.53314C4.80368 7.55314 4.73479 7.5787 4.66479 7.63092C4.7359 7.68425 4.80479 7.7098 4.87478 7.72869C4.90589 7.73647 4.937 7.74313 4.967 7.74758C4.97145 7.77869 4.977 7.8098 4.98478 7.8409C5.00478 7.91201 5.03033 7.9809 5.08255 8.05089C5.13588 7.97979 5.16144 7.9109 5.18032 7.8409C5.1881 7.8098 5.19477 7.77869 5.19921 7.74869C5.23032 7.74424 5.26254 7.73869 5.29365 7.7298C5.36698 7.71091 5.43698 7.68425 5.50697 7.63203Z" fill="white"/>
+<path d="M7.49717 3.18121L9.13737 5.18702C9.13737 5.18702 9.31628 5.42038 9.32184 5.61263C9.33073 5.91489 9.34629 6.11714 9.60632 6.37606C9.86635 6.63609 10.1986 6.65054 10.3764 6.64387C10.5542 6.6372 10.782 6.83056 10.782 6.83056L12.7878 8.47077C12.8945 8.56078 13.0579 8.54411 13.1423 8.42632C13.2112 8.33075 13.1923 8.1974 13.1134 8.10961C12.6711 7.61733 11.4243 6.20826 11.4243 6.20826C11.4243 6.20826 11.2343 5.96934 11.2299 5.77154C11.2254 5.57263 11.2443 5.31148 10.9498 5.01811C10.6553 4.72474 10.442 4.7503 10.1764 4.7403C9.95192 4.73141 9.75967 4.54361 9.75967 4.54361C9.75967 4.54361 8.35061 3.29567 7.85721 2.85451C7.76942 2.77561 7.63607 2.75672 7.54051 2.82561C7.42383 2.91118 7.40716 3.07453 7.49717 3.18121Z" fill="#9E740B"/>
+<path d="M10.2927 5.69853L7.48284 2.88867C7.42285 2.97756 7.42618 3.09644 7.49729 3.18088L9.1372 5.18633C9.1372 5.18633 9.31608 5.41965 9.32163 5.61186C9.32608 5.78408 9.33386 5.92407 9.38719 6.06073C9.45829 6.24183 9.69828 6.28405 9.83716 6.14739C10.0383 5.95073 10.2927 5.69853 10.2927 5.69853Z" fill="#E2A610"/>
+<path d="M10.2763 6.13662C10.5212 6.13662 10.7196 5.93814 10.7196 5.69331C10.7196 5.44848 10.5212 5.25 10.2763 5.25C10.0315 5.25 9.83301 5.44848 9.83301 5.69331C9.83301 5.93814 10.0315 6.13662 10.2763 6.13662Z" fill="#1E4EA6"/>
+<path d="M10.203 5.5726C10.1697 5.62593 10.1519 5.67592 10.1619 5.73592C10.1653 5.7837 10.1942 5.83592 10.1608 5.88036C10.1186 5.93813 10.0264 5.9248 9.98195 5.87258C9.91862 5.79592 9.91529 5.70148 9.92751 5.62371C9.94862 5.48927 10.0186 5.38816 10.1397 5.39927C10.2275 5.40705 10.2519 5.50704 10.203 5.5726Z" fill="#42A5F5"/>
+<path d="M11.2925 4.67756C11.4836 4.86866 11.6425 5.06532 11.7625 5.24864C11.7836 5.23642 11.8025 5.22197 11.8203 5.2042C12.0058 5.01865 11.9203 4.632 11.6292 4.34091C11.3381 4.04981 10.9514 3.96426 10.7659 4.14981C10.7481 4.16758 10.7348 4.18647 10.7214 4.20758C10.9048 4.32758 11.1014 4.48646 11.2925 4.67756Z" fill="#A65F3E"/>
+<path d="M11.8555 4.11514C12.0255 4.28513 12.1655 4.45957 12.2689 4.624C12.2877 4.61178 12.3066 4.59845 12.3222 4.58289C12.4944 4.41068 12.4255 4.0607 12.1677 3.80293C11.91 3.54517 11.5611 3.47628 11.3878 3.6485C11.3711 3.66516 11.3578 3.68294 11.3467 3.70183C11.51 3.80516 11.6856 3.94515 11.8555 4.11514Z" fill="#A65F3E"/>
+<path d="M12.4181 3.55218C12.5658 3.69995 12.687 3.85328 12.7758 3.99771C12.7936 3.9866 12.8103 3.97438 12.8247 3.95883C12.9847 3.79883 12.9314 3.48774 12.707 3.2622C12.4825 3.03665 12.1703 2.98443 12.0103 3.14442C11.9959 3.15887 11.9825 3.17553 11.9714 3.19331C12.117 3.28331 12.2703 3.40441 12.4181 3.55218Z" fill="#A65F3E"/>
+<path d="M12.9803 2.99016C13.1059 3.11571 13.2081 3.24793 13.2826 3.37348C13.2981 3.36348 13.3137 3.35125 13.327 3.33792C13.4737 3.19126 13.437 2.91683 13.2459 2.72573C13.0548 2.53463 12.7804 2.49797 12.6337 2.64463C12.6204 2.65796 12.6081 2.67351 12.5981 2.68907C12.7226 2.7624 12.8548 2.86461 12.9803 2.99016Z" fill="#A65F3E"/>
+<path d="M13.5057 2.19295C13.3812 2.08295 13.2401 2.02851 13.139 2.00407C13.0557 1.98407 12.9924 1.91518 12.9757 1.83074V1.82963C12.9446 1.67075 13.089 1.53298 13.2468 1.57076C13.4234 1.61409 13.6312 1.70631 13.8101 1.86741C13.9134 1.96074 13.8979 2.12739 13.7845 2.2085C13.7001 2.27072 13.5845 2.26183 13.5057 2.19295Z" fill="#E2A610"/>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/telescope.svg b/examples/bedtime-story-teller/assets/img/telescope.svg
new file mode 100644
index 0000000..ba48236
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/telescope.svg
@@ -0,0 +1,33 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0145 5.29259C13.0323 5.39369 13.1267 5.68368 13.0734 5.827L12.7423 6.69696C12.6556 6.92028 12.7889 7.17915 13.0378 7.27582C13.2878 7.37248 13.5589 7.26915 13.6456 7.04472L13.9889 6.17032C14.0433 6.03255 14.2644 5.87033 14.3544 5.80034C14.4266 5.74478 14.41 5.63146 14.3233 5.60035C13.9878 5.47813 13.5767 5.31147 13.1656 5.16482C13.0845 5.13593 12.9989 5.20592 13.0145 5.29259Z" fill="#616161"/>
+<path d="M13.6458 7.04465L13.9613 6.24358C13.9613 6.24358 13.6191 6.46802 12.9503 6.15137L12.7436 6.69689C12.657 6.92022 12.7903 7.17909 13.0392 7.27575C13.288 7.3713 13.5603 7.26798 13.6458 7.04465Z" fill="#212121"/>
+<path d="M14.123 6.8638C14.1696 6.81714 14.1508 6.73825 14.0885 6.71714L12.4875 6.17162C12.3242 6.10718 12.1997 5.97496 12.1342 5.81275C11.942 5.34277 11.4931 5.03834 11.3198 4.97168L10.932 5.19278L10.1976 6.91936L10.4465 7.346C10.6187 7.41266 11.1431 7.4971 11.5831 7.28267C11.7442 7.20379 11.9287 7.18601 12.0964 7.24934L13.1964 7.59821C13.2864 7.6271 13.3852 7.60265 13.4519 7.53599L14.123 6.8638Z" fill="#616161"/>
+<path d="M11.3322 4.9761L4.54356 2.23242C4.44354 2.49134 3.56343 4.60494 3.54565 4.82164L10.4221 7.33751C10.6843 7.43863 11.0999 6.9908 11.3511 6.33849C11.6022 5.6873 11.5944 5.07722 11.3322 4.9761Z" fill="#CFD8DC"/>
+<path d="M3.90015 4.95255L10.4221 7.33798C10.5521 7.38798 10.7232 7.29798 10.891 7.1191L9.25081 6.45247C9.25081 6.45247 9.80755 5.84361 9.37194 5.08588L8.43293 6.13027L4.12684 4.39258C4.09906 4.46369 4.01127 4.67701 3.90015 4.95255Z" fill="#BDBDBD"/>
+<path d="M3.18383 3.19547C3.52081 2.32114 3.49276 1.49622 3.12117 1.35295C2.74959 1.20968 2.17518 1.80232 1.83819 2.67665C1.50121 3.55098 1.52926 4.37591 1.90085 4.51918C2.27243 4.66244 2.84684 4.0698 3.18383 3.19547Z" fill="#CFD8DC"/>
+<path d="M5.64823 2.40412C5.29269 2.26746 4.74272 2.8341 4.41941 3.67183C4.0972 4.50957 4.12387 5.29841 4.4794 5.43618C4.83494 5.57284 5.38491 5.00621 5.70823 4.16847C6.03043 3.33074 6.00377 2.54078 5.64823 2.40412Z" fill="#616161"/>
+<path d="M5.64735 2.40457L3.12081 1.35352L1.90088 4.51891L4.47852 5.43553L5.64735 2.40457Z" fill="#616161"/>
+<path d="M2.91358 3.09447C3.18965 2.37817 3.19299 1.7125 2.92102 1.60764C2.64906 1.50278 2.20479 1.99845 1.92871 2.71475C1.65264 3.43104 1.6493 4.09672 1.92127 4.20158C2.19323 4.30644 2.6375 3.81077 2.91358 3.09447Z" fill="#212121"/>
+<path d="M2.27125 2.8463C2.46902 2.33299 2.81678 1.96412 3.17454 1.91412C3.22676 1.90635 3.14787 2.65186 2.90344 3.2485C2.69234 3.76514 2.3168 4.14845 2.28569 4.10401C2.08237 3.81958 2.08237 3.33627 2.27125 2.8463Z" fill="url(#paint0_linear_2523_6078)"/>
+<path d="M2.83217 4.31031L4.60096 4.9736C4.91872 5.09249 5.1576 5.11249 5.32648 4.89583C5.52314 4.64362 5.57091 4.51918 5.63535 4.35253C5.73535 4.09476 5.4698 3.9081 5.36759 3.86811L3.45213 3.07704C3.33881 3.03037 3.20881 3.07481 3.14882 3.18148L2.70662 3.96255C2.63329 4.09365 2.69217 4.25809 2.83217 4.31031Z" fill="#212121"/>
+<path d="M3.12057 1.35339C2.74837 1.21006 2.17506 1.80336 1.8373 2.67665C1.50065 3.55105 1.52843 4.37545 1.90063 4.51878C2.27172 4.6621 2.84614 4.06991 3.18279 3.19551C3.51944 2.32111 3.49166 1.49671 3.12057 1.35339ZM1.9673 4.08324C1.74175 3.99658 1.76286 3.39661 2.01396 2.74443C2.26506 2.09224 2.6517 1.63337 2.87836 1.72115C3.10501 1.80892 3.08279 2.40778 2.83169 3.05996C2.57949 3.71215 2.19284 4.17102 1.9673 4.08324Z" fill="#9E9E9E"/>
+<path d="M7.11475 7.0178C7.11475 7.43444 7.33696 7.77109 7.61028 7.77109C7.88359 7.77109 8.10581 7.43333 8.10581 7.0178C8.10581 6.75337 8.01581 6.52116 7.88137 6.38672L7.33473 6.39227C7.20141 6.52671 7.11475 6.7567 7.11475 7.0178Z" fill="#82AEC0"/>
+<path d="M8.12245 7.46875C7.98912 7.46875 7.72803 7.70545 7.72803 7.90881L7.79913 10.9992L7.8958 11.4515L7.92246 14.2796C7.92246 14.4674 8.0769 14.6252 8.08356 14.6319L8.12023 14.6697L8.15912 14.6341C8.16578 14.6274 8.33577 14.4707 8.33577 14.2807V11.4215L8.44355 10.9603L8.51465 7.8099C8.51465 7.60877 8.26022 7.46875 8.12245 7.46875Z" fill="#82AEC0"/>
+<path d="M8.01253 6.97164C7.89698 7.03831 7.78921 7.37391 7.89031 7.5506L9.60689 10.381L9.91687 10.7243L11.3535 13.1602C11.4479 13.3235 11.659 13.3824 11.669 13.3847L11.7201 13.398L11.7357 13.348C11.739 13.3391 11.8068 13.118 11.7112 12.9535L10.2824 10.4776L10.1457 10.0242L8.52139 7.07054C8.4214 6.89718 8.13141 6.90274 8.01253 6.97164Z" fill="#82AEC0"/>
+<path d="M8.20977 6.97171C8.32532 7.03838 8.43309 7.37398 8.33199 7.55067L6.6143 10.381L6.30432 10.7244L4.86773 13.1591C4.77329 13.3225 4.56219 13.3814 4.55219 13.3836L4.50108 13.397L4.48552 13.347C4.48219 13.3381 4.41442 13.1169 4.50997 12.9525L5.93878 10.4777L6.07544 10.0243L7.6998 7.0695C7.79979 6.89725 8.08978 6.90281 8.20977 6.97171Z" fill="#82AEC0"/>
+<path d="M7.51147 7.77137C7.51147 7.77137 8.5992 7.91025 8.78807 7.83914C9.02917 7.74693 9.21805 7.42028 9.20139 7.05141C9.18472 6.68254 8.85918 6.387 8.83696 6.41366C9.04917 6.32144 9.25249 6.13812 9.39693 5.6337C9.45359 5.43482 9.46804 5.25817 9.41804 5.1304C9.34693 4.94596 9.20139 4.85819 9.07361 4.89819C8.94362 4.93818 8.88696 5.11817 8.85029 5.2315C8.77585 5.46149 8.68919 5.69259 8.54586 5.88702C8.40254 6.08146 8.07033 6.287 7.66147 6.32478L7.51147 7.77137Z" fill="#82AEC0"/>
+<path d="M7.38135 7.67773L7.74244 7.74884V8.52547L7.55912 8.82545C7.55912 8.82545 7.58578 8.39992 7.56134 8.18326C7.52245 7.85106 7.38135 7.67773 7.38135 7.67773Z" fill="#2F7889"/>
+<path d="M8.57705 8.68228C8.57705 8.68228 8.65149 8.42785 8.95037 8.42785C9.24924 8.42785 9.40701 8.68228 9.40701 8.68228L8.90704 7.77344C8.90704 7.77344 8.75149 7.92343 8.5115 7.93787L8.49817 8.55229L8.57705 8.68228Z" fill="#2F7889"/>
+<path d="M8.43118 7.81807C8.78217 7.81807 9.0667 7.50617 9.0667 7.12144C9.0667 6.7367 8.78217 6.4248 8.43118 6.4248C8.08019 6.4248 7.79565 6.7367 7.79565 7.12144C7.79565 7.50617 8.08019 7.81807 8.43118 7.81807Z" fill="#B9E4EA"/>
+<path d="M8.48118 7.43149C8.63704 7.43149 8.76339 7.29271 8.76339 7.12151C8.76339 6.95031 8.63704 6.81152 8.48118 6.81152C8.32532 6.81152 8.19897 6.95031 8.19897 7.12151C8.19897 7.29271 8.32532 7.43149 8.48118 7.43149Z" fill="#2F7889"/>
+<path d="M7.14223 6.14383L7.66221 6.32382C7.66221 6.32382 8.29106 6.23716 8.5466 5.88606C8.80215 5.53386 8.89436 5.045 8.93658 4.98833C8.9788 4.93167 9.0788 4.87501 9.16324 4.89612C9.24879 4.91723 9.24879 4.91723 9.24879 4.91723C9.24879 4.91723 9.0788 4.91056 9.03658 5.08722C8.99436 5.26499 8.82437 5.7894 8.61104 6.00939C8.39883 6.22938 8.0433 6.34937 7.92997 6.40604C7.81664 6.4627 7.68887 6.91712 7.52555 6.9949C7.36222 7.07267 7.13557 6.97379 7.14223 6.79602C7.1489 6.61825 7.29111 6.43381 7.29111 6.43381L7.14223 6.14383Z" fill="#2F7889"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.38456 3.53267C6.4176 3.44676 6.51402 3.4039 6.59993 3.43693L8.61094 4.21022C8.69685 4.24326 8.73971 4.33968 8.70667 4.42559C8.67364 4.5115 8.57722 4.55437 8.49131 4.52133L6.4803 3.74804C6.39439 3.715 6.35153 3.61858 6.38456 3.53267Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2523_6078" x1="3.36732" y1="3.64173" x2="2.46582" y2="2.74555" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1565C0"/>
+<stop offset="0.1307" stop-color="#2574C5"/>
+<stop offset="0.7229" stop-color="#69B5D8"/>
+<stop offset="1" stop-color="#84CFE0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/trash.svg b/examples/bedtime-story-teller/assets/img/trash.svg
new file mode 100644
index 0000000..fa9d42d
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/trash.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.71387 0.857422C7.77026 0.857096 7.8267 0.867353 7.87891 0.888672C7.93112 0.909997 7.97851 0.94173 8.01855 0.981445L8.74707 1.71387H11.1426C11.2562 1.71387 11.3659 1.75947 11.4463 1.83984C11.5265 1.92013 11.5712 2.02912 11.5713 2.14258V3.85742C11.5712 3.97089 11.5265 4.07986 11.4463 4.16016C11.3659 4.24053 11.2562 4.28613 11.1426 4.28613H10.7139V12C10.7139 12.1136 10.6691 12.2224 10.5889 12.3027C10.5086 12.383 10.3996 12.4286 10.2861 12.4287H3.42871C3.31507 12.4287 3.20634 12.3831 3.12598 12.3027C3.0456 12.2224 3 12.1137 3 12V4.28613H2.57129C2.4577 4.2861 2.34889 4.24046 2.26855 4.16016C2.18824 4.07984 2.14265 3.97099 2.14258 3.85742V2.14258C2.14266 2.02902 2.18825 1.92015 2.26855 1.83984C2.34889 1.75956 2.45771 1.7139 2.57129 1.71387H4.9668L5.69531 0.981445C5.73536 0.941725 5.78372 0.91 5.83594 0.888672C5.88801 0.867482 5.94378 0.857097 6 0.857422H7.71387ZM3.85742 11.5713H9.85742V4.28613H3.85742V11.5713ZM5.57129 5.14258C5.68488 5.14258 5.79366 5.18827 5.87402 5.26855C5.95436 5.34889 5.99996 5.45768 6 5.57129V10.2861C5.99989 10.3997 5.9543 10.5086 5.87402 10.5889C5.79368 10.6691 5.68483 10.7139 5.57129 10.7139C5.45774 10.7138 5.34888 10.6691 5.26855 10.5889C5.18828 10.5086 5.14268 10.3997 5.14258 10.2861V5.57129C5.14262 5.45768 5.18822 5.34889 5.26855 5.26855C5.34889 5.18822 5.45768 5.14261 5.57129 5.14258ZM8.14258 5.14258C8.25624 5.14258 8.36592 5.18818 8.44629 5.26855C8.52646 5.34886 8.57125 5.45781 8.57129 5.57129V10.2861C8.57118 10.3996 8.52647 10.5086 8.44629 10.5889C8.36592 10.6692 8.25624 10.7139 8.14258 10.7139C8.02904 10.7138 7.92014 10.6691 7.83984 10.5889C7.75957 10.5086 7.71397 10.3997 7.71387 10.2861V5.57129C7.71391 5.45771 7.75955 5.34888 7.83984 5.26855C7.92015 5.18825 8.02901 5.14265 8.14258 5.14258ZM5.44727 2.44727C5.40723 2.48697 5.35981 2.51871 5.30762 2.54004C5.2554 2.56137 5.19898 2.57162 5.14258 2.57129H3V3.42871H10.7139V2.57129H8.57129C8.51509 2.5716 8.45928 2.56124 8.40723 2.54004C8.35513 2.51876 8.30757 2.48686 8.26758 2.44727L7.53809 1.71387H6.17578L5.44727 2.44727Z" fill="#AA4335"/>
+</svg>
diff --git a/examples/bedtime-story-teller/assets/img/tv.svg b/examples/bedtime-story-teller/assets/img/tv.svg
new file mode 100644
index 0000000..a6be80f
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/tv.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M7.62698 5.45606L5.2171 2.43177C5.18377 2.38955 5.18933 2.32845 5.22932 2.29289C5.27154 2.25623 5.33487 2.25956 5.37154 2.30178L7.93474 5.18941C7.9714 5.23163 7.96807 5.29496 7.92585 5.33162L7.77252 5.46717C7.72919 5.50606 7.66253 5.5005 7.62698 5.45606Z" fill="#455A64"/>
+<path d="M8.24644 5.43919L8.10867 5.31698C8.06311 5.27587 8.05867 5.20587 8.09978 5.16032L10.6485 2.28713C10.6896 2.24158 10.7596 2.23714 10.8052 2.27825C10.8496 2.31713 10.8552 2.38491 10.8185 2.43157L8.40754 5.42697C8.36643 5.47475 8.2931 5.48141 8.24644 5.43919Z" fill="#455A64"/>
+<path d="M6.19409 5.60759C6.19409 5.21984 7.05405 4.9043 8.1151 4.9043C9.17616 4.9043 10.0361 5.21872 10.0361 5.60759H6.19409Z" fill="#455A64"/>
+<path d="M14.1757 14.6685H1.82529C1.55304 14.6685 1.33301 14.4395 1.33301 14.1584V5.90069C1.33301 5.61843 1.55304 5.39062 1.82529 5.39062H14.1768C14.448 5.39062 14.6691 5.61954 14.6691 5.90069V14.1584C14.668 14.4395 14.448 14.6685 14.1757 14.6685Z" fill="#82AEC0"/>
+<path d="M13.8179 14.1841H2.21871C2.00091 14.1841 1.82422 14.0074 1.82422 13.7896V6.2275C1.82422 6.0097 2.00091 5.83301 2.21871 5.83301H13.8179C14.0357 5.83301 14.2124 6.0097 14.2124 6.2275V13.7896C14.2124 14.0074 14.0357 14.1841 13.8179 14.1841Z" fill="#212121"/>
+<path d="M2.59938 12.9971L2.06598 13.8359C1.97264 13.9826 2.07265 14.1815 2.24601 14.1826C2.24823 14.1826 2.25045 14.1826 2.25267 14.1826C2.48937 14.1826 11.1693 14.1826 11.4449 14.1826H11.4527C11.6494 14.1815 11.7772 13.9748 11.6916 13.7981L11.3583 13.1115L2.59938 12.9971Z" fill="#B9E4EA"/>
+<path d="M13.6559 13.8317H12.3904C12.2615 13.8317 12.1582 13.7272 12.1582 13.5995V10.9607C12.1582 10.8318 12.2626 10.7285 12.3904 10.7285H13.6559C13.7848 10.7285 13.8881 10.833 13.8881 10.9607V13.5995C13.8881 13.7272 13.7848 13.8317 13.6559 13.8317Z" fill="#455A64"/>
+<path d="M13.0233 10.1131C13.4461 10.1131 13.7888 9.77033 13.7888 9.34755C13.7888 8.92476 13.4461 8.58203 13.0233 8.58203C12.6005 8.58203 12.2578 8.92476 12.2578 9.34755C12.2578 9.77033 12.6005 10.1131 13.0233 10.1131Z" fill="#455A64"/>
+<path d="M12.4825 8.89944C12.4447 8.94499 12.4436 9.00943 12.478 9.0561L12.7302 9.39497C12.8091 9.50052 12.9113 9.58607 13.0302 9.64384L13.4102 9.82828C13.4624 9.85383 13.5257 9.8405 13.5635 9.79495C13.6013 9.74939 13.6024 9.68495 13.568 9.63829L13.3158 9.29942C13.2369 9.19387 13.1347 9.10832 13.0158 9.05054L12.6358 8.86611C12.5836 8.84055 12.5202 8.855 12.4825 8.89944Z" fill="#82AEC0"/>
+<path d="M13.0233 8.13455C13.4461 8.13455 13.7888 7.79181 13.7888 7.36903C13.7888 6.94625 13.4461 6.60352 13.0233 6.60352C12.6005 6.60352 12.2578 6.94625 12.2578 7.36903C12.2578 7.79181 12.6005 8.13455 13.0233 8.13455Z" fill="#455A64"/>
+<path d="M13.0238 6.66602C12.9649 6.66602 12.9138 6.70601 12.9004 6.76268L12.8004 7.17377C12.7693 7.30154 12.7693 7.43486 12.8004 7.56375L12.9004 7.97484C12.9149 8.0315 12.9649 8.0715 13.0238 8.0715C13.0826 8.0715 13.1337 8.0315 13.1471 7.97484L13.2471 7.56375C13.2782 7.43598 13.2782 7.30265 13.2471 7.17377L13.1471 6.76268C13.1326 6.70601 13.0815 6.66602 13.0238 6.66602Z" fill="#82AEC0"/>
+<path d="M11.4957 12.6098C11.4101 12.9954 11.1246 13.2932 10.7578 13.3743C10.1555 13.5088 9.03318 13.6766 7.18406 13.6766C5.24271 13.6766 3.94032 13.4921 3.23913 13.3554C2.8513 13.2799 2.54682 12.9621 2.47125 12.552C2.29679 11.6097 2.07787 9.72609 2.48014 7.37358C2.5546 6.93797 2.88686 6.60348 3.30136 6.54681C4.04923 6.44346 5.38495 6.30566 7.18406 6.30566C8.89094 6.30566 10.0344 6.43012 10.6823 6.53014C11.0812 6.59237 11.4001 6.91574 11.4813 7.33468C11.9624 9.81277 11.6968 11.7008 11.4957 12.6098Z" fill="#2F7889"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.1839 6.52751C5.39607 6.52751 4.07056 6.66444 3.33162 6.76656L3.3313 6.7666C3.02014 6.80915 2.75842 7.06327 2.69905 7.41061L2.69905 7.41063C2.30228 9.731 2.51859 11.5873 2.68963 12.5111L2.68966 12.5113C2.7498 12.8377 2.98928 13.08 3.28147 13.1369L3.28149 13.1369C3.96862 13.2708 5.25676 13.4539 7.1839 13.4539C9.01987 13.4539 10.1256 13.2873 10.7093 13.157L10.7097 13.1569C10.9856 13.0959 11.2103 12.8691 11.2786 12.5612C11.4747 11.675 11.7371 9.81851 11.2629 7.37664L11.2629 7.37653C11.198 7.0414 10.9463 6.79593 10.648 6.74934C10.0117 6.65114 8.87969 6.52751 7.1839 6.52751ZM3.27092 6.32622C4.02774 6.22164 5.37362 6.08301 7.1839 6.08301C8.90167 6.08301 10.0565 6.20827 10.716 6.31008L10.7164 6.31014V6.31014C11.2159 6.38805 11.602 6.78932 11.6993 7.29203C12.1875 9.80615 11.9187 11.7255 11.7126 12.6574L11.7125 12.6575C11.6097 13.1209 11.2632 13.4897 10.8057 13.5909C10.1846 13.7295 9.04575 13.8984 7.1839 13.8984C5.22833 13.8984 3.91171 13.7126 3.19644 13.5732C2.713 13.479 2.34353 13.0856 2.25253 12.5919M3.27092 6.32622C2.75317 6.39709 2.35044 6.8119 2.26091 7.33573C1.85317 9.72023 2.07463 11.6309 2.25252 12.5919" fill="#212121"/>
+<path d="M4.34267 7.08849C4.52933 7.06627 4.88264 7.08182 5.00708 7.46069C5.13152 7.83956 4.8582 7.94178 4.71154 8.05399C4.29045 8.37509 4.08157 8.4973 3.82825 8.84729C3.62604 9.12727 3.27273 9.0395 3.16718 8.85506C3.08274 8.70618 3.02052 8.22843 3.1994 7.91289C3.58493 7.23737 4.15602 7.11071 4.34267 7.08849Z" fill="url(#paint0_linear_2527_14319)"/>
+<defs>
+<linearGradient id="paint0_linear_2527_14319" x1="4.15103" y1="4.79591" x2="4.03495" y2="9.00789" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/img/wizard.svg b/examples/bedtime-story-teller/assets/img/wizard.svg
new file mode 100644
index 0000000..50f56a3
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/img/wizard.svg
@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M7.0508 9.22324C10.1097 9.22324 12.5894 8.31194 12.5894 7.18779C12.5894 6.06364 10.1097 5.15234 7.0508 5.15234C3.99192 5.15234 1.51221 6.06364 1.51221 7.18779C1.51221 8.31194 3.99192 9.22324 7.0508 9.22324Z" fill="url(#paint0_linear_2527_5963)"/>
+<path d="M12.5127 14.6691V14.338C12.5127 12.4726 9.73622 11.5504 7.03414 11.5537C4.34873 11.5571 1.55554 12.3626 1.55554 14.3369V14.668H12.5127V14.6691Z" fill="url(#paint1_linear_2527_5963)"/>
+<path d="M13.366 12.2593C13.3004 12.2249 13.2204 12.2471 13.1827 12.3104C12.9738 12.6604 12.5649 12.9193 12.1694 13.1704C11.9872 13.2859 11.8005 13.4048 11.6383 13.5293C11.5883 13.5682 11.5705 13.6359 11.5961 13.6937L12.0216 14.6636H12.1727H12.4494H13.996H14.1404H14.2793C14.3359 14.0948 14.3504 12.7826 13.366 12.2593Z" fill="url(#paint2_linear_2527_5963)"/>
+<path d="M4.59994 13.6162L4.65549 13.9118L4.92992 14.034L4.66549 14.1773L4.63438 14.4762L4.41661 14.2706L4.12218 14.3328L4.25107 14.0617L4.10107 13.8018L4.39884 13.8406L4.59994 13.6162Z" fill="#F9F722"/>
+<path d="M2.79108 13.0625L3.02996 13.3069L3.36661 13.2503L3.20773 13.5525L3.36661 13.8547L3.02996 13.7969L2.79108 14.0424L2.7422 13.7036L2.43555 13.5525L2.7422 13.4014L2.79108 13.0625Z" fill="#F9F722"/>
+<path d="M9.69407 12.7988L9.70962 13.1688L10.0229 13.3655L9.67629 13.4943L9.58519 13.8532L9.3552 13.5632L8.98633 13.5888L9.19076 13.2799L9.05299 12.9366L9.40964 13.0355L9.69407 12.7988Z" fill="#F9F722"/>
+<path d="M10.1452 6.36426H9.34191H4.99103H4.18774C3.54555 6.36426 3.02002 6.92423 3.02002 7.60864C3.02002 8.29304 3.54555 8.85301 4.18774 8.85301H4.99103H9.34191H10.1452C10.7874 8.85301 11.3129 8.29304 11.3129 7.60864C11.3129 6.92423 10.7885 6.36426 10.1452 6.36426Z" fill="#C48E6A"/>
+<path d="M7.1208 3.04199C5.22313 3.04199 3.46655 4.07527 3.46655 6.99511C3.46655 9.8994 5.27646 11.3349 7.1208 11.3349C8.96515 11.3349 10.7751 9.8994 10.7751 6.99511C10.7751 4.07527 9.01848 3.04199 7.1208 3.04199Z" fill="#E0BB95"/>
+<path d="M4.13114 4.54395C3.72894 4.54395 3.40229 4.87059 3.40229 5.2728C3.4034 5.60278 3.41118 6.06386 3.44007 6.74272C3.46229 7.27936 3.22897 8.5404 3.0412 9.10592C2.75788 9.96254 2.80232 11.0114 3.20119 11.8202C3.55895 12.5446 5.28552 13.6968 6.30547 14.2634C6.69434 14.4801 7.60096 14.4823 7.99205 14.2701C8.99533 13.7257 10.6697 12.6335 11.0541 11.9447C11.5252 11.1014 11.5941 9.98254 11.2908 9.06593C11.1041 8.50151 10.8786 7.26713 10.8963 6.74383C10.9208 6.05609 10.9219 5.59278 10.9174 5.2628C10.9119 4.86393 10.5875 4.54506 10.1886 4.54506H4.13114V4.54395ZM10.1842 7.09825C10.1842 8.43818 9.80529 9.12481 8.91422 9.12481C7.98205 9.12481 7.82317 8.85149 7.13098 8.85149C6.43769 8.85149 6.27214 9.12481 5.36996 9.12481C4.55667 9.12481 4.13336 8.18153 4.13336 7.0627C4.13336 5.94387 4.02004 4.87615 4.3278 4.9317C4.80222 5.01836 6.2888 5.12391 7.1232 5.12391C7.92427 5.12391 9.38975 5.02614 9.87306 4.9417C10.203 4.88504 10.1842 5.75721 10.1842 7.09825Z" fill="url(#paint3_linear_2527_5963)"/>
+<path d="M11.2918 9.06286C11.1051 8.49845 10.8796 7.26518 10.8973 6.74076C10.9218 6.05302 10.9229 5.58971 10.9184 5.25973C10.9129 4.86086 10.5885 4.54199 10.1907 4.54199H10.184V7.0963C10.184 8.43623 9.80516 9.12175 8.9141 9.12175C7.98082 9.12175 7.82193 8.84843 7.12975 8.84843C6.43645 8.84843 6.27202 9.12175 5.36984 9.12175C4.55544 9.12175 4.13213 8.17958 4.13213 7.06075C4.13213 6.27523 4.07658 5.51527 4.14991 5.15085V4.54199H4.13102C3.72882 4.54199 3.40217 4.86753 3.40328 5.27084C3.40328 5.59971 3.41106 6.06191 3.43994 6.74076C3.46328 7.2774 3.22884 8.53845 3.04108 9.10397C2.75776 9.96059 2.8022 11.0094 3.20107 11.8183C3.55883 12.5427 5.2854 13.6948 6.30535 14.2615C6.69422 14.4781 7.60083 14.4804 7.99193 14.2681C8.99521 13.7237 10.6696 12.6316 11.0551 11.9427C11.5262 11.0994 11.5951 9.98059 11.2918 9.06286Z" fill="url(#paint4_radial_2527_5963)"/>
+<path d="M8.01522 9.35046C7.66857 9.55712 6.52974 9.55712 6.18198 9.35046C5.9831 9.23158 5.77867 9.41379 5.862 9.5949C5.94311 9.77266 6.56418 10.186 7.10193 10.186C7.63968 10.186 8.25187 9.77266 8.33298 9.5949C8.41631 9.41379 8.21521 9.23269 8.01522 9.35046Z" fill="#6D4C41"/>
+<path d="M9.75078 6.48588C9.75078 6.48477 9.50079 6.07812 8.91971 6.07812C8.33863 6.07812 8.08753 6.48477 8.08753 6.48477V6.48588C8.06753 6.51477 8.0542 6.55032 8.0542 6.58921C8.0542 6.68698 8.13086 6.76698 8.22641 6.76698C8.24641 6.76698 8.29419 6.75253 8.29863 6.75031C8.64639 6.60254 8.91971 6.60143 8.91971 6.60143C8.91971 6.60143 9.18969 6.60254 9.53857 6.75031C9.54301 6.75253 9.59079 6.76698 9.61078 6.76698C9.70633 6.76698 9.783 6.68698 9.783 6.58921C9.783 6.55032 9.77078 6.51477 9.75078 6.48588Z" fill="white"/>
+<path d="M6.20877 6.48588C6.20988 6.48477 5.95879 6.07812 5.3777 6.07812C4.79662 6.07812 4.54553 6.48477 4.54553 6.48477L4.54664 6.48588C4.52664 6.51477 4.51331 6.55032 4.51331 6.58921C4.51331 6.68698 4.58997 6.76698 4.68552 6.76698C4.70552 6.76698 4.75329 6.75253 4.75774 6.75031C5.1055 6.60254 5.37882 6.60143 5.37882 6.60143C5.37882 6.60143 5.64991 6.60254 5.99767 6.75031C6.00212 6.75253 6.04989 6.76698 6.06989 6.76698C6.16544 6.76698 6.2421 6.68698 6.2421 6.58921C6.2421 6.55032 6.22877 6.51477 6.20877 6.48588Z" fill="white"/>
+<path d="M9.12731 2.82417C9.18731 2.70862 10.375 2.97083 10.4995 2.77529C10.6295 2.56974 9.98282 1.70423 8.58845 1.43203C8.11959 1.33981 7.48184 1.21537 6.68966 1.47758C6.22302 1.63201 4.14868 2.37753 3.68982 5.11627C3.68871 5.12294 10.8361 5.14294 10.8361 5.14294C10.5495 4.19077 9.06731 2.93972 9.12731 2.82417Z" fill="url(#paint5_linear_2527_5963)"/>
+<path d="M12.6461 6.98868C11.9017 3.82774 7.47637 2.51003 4.51764 3.83219C3.57658 4.2255 2.61219 4.90435 1.99 5.8843C1.78556 6.17206 1.00783 7.77531 2.16221 7.33755C8.54965 3.60109 12.6861 8.7597 12.6461 6.98868Z" fill="url(#paint6_linear_2527_5963)"/>
+<path d="M7.5186 8.48447C7.50749 8.48003 7.49526 8.4767 7.48304 8.47559H6.71197C6.69975 8.4767 6.68864 8.48003 6.67642 8.48447C6.60642 8.51225 6.56865 8.58558 6.60087 8.66224C6.63309 8.73891 6.78752 8.95556 7.0964 8.95556C7.40527 8.95556 7.55971 8.73891 7.59193 8.66224C7.62637 8.58558 7.58859 8.51336 7.5186 8.48447Z" fill="#C48E6A"/>
+<path d="M5.29872 8.02831C5.5951 8.02831 5.83536 7.7791 5.83536 7.47168C5.83536 7.16425 5.5951 6.91504 5.29872 6.91504C5.00235 6.91504 4.76208 7.16425 4.76208 7.47168C4.76208 7.7791 5.00235 8.02831 5.29872 8.02831Z" fill="#5D4037"/>
+<path d="M8.92409 8.02831C9.22047 8.02831 9.46073 7.7791 9.46073 7.47168C9.46073 7.16425 9.22047 6.91504 8.92409 6.91504C8.62771 6.91504 8.38745 7.16425 8.38745 7.47168C8.38745 7.7791 8.62771 8.02831 8.92409 8.02831Z" fill="#5D4037"/>
+<path d="M13.3516 9.94192L13.0161 10.2452L13.285 10.9152L14.1327 10.903L14.5927 9.60527L13.1205 8.35645L11.4995 9.62416L12.3172 11.3318C12.2561 11.5741 11.9106 12.9373 11.8184 13.3028C11.7373 13.6239 11.6284 14.1406 11.5251 14.655H11.6328H11.7406H12.165H12.2761H12.3872L13.3705 11.4541L12.4972 9.87748L13.1005 9.47305L13.7016 9.73859L13.6861 10.0097L13.3516 9.94192Z" fill="#CF8900"/>
+<path d="M13.7296 13.2372C13.714 13.0805 13.6596 12.9305 13.6074 12.805C13.4452 12.4083 13.2585 12.1006 12.8363 11.7895C12.4075 11.4728 11.9353 11.4095 11.7219 11.4439C11.4831 11.4828 11.3308 11.5762 11.2686 11.7217C11.2208 11.8328 11.2408 11.9472 11.2697 12.0317C11.1475 12.0728 10.982 12.1561 10.9286 12.3061C10.8664 12.4817 10.9175 12.625 10.9909 12.7216C10.8864 12.7883 10.7542 12.8939 10.7164 13.0261C10.6664 13.2016 10.8298 13.3983 10.9386 13.5049C10.8853 13.576 10.8209 13.6727 10.8064 13.7427C10.7309 14.1127 11.2131 14.3216 11.5097 14.386C11.5553 14.396 11.6019 14.3749 11.6264 14.3349L11.7297 14.1549C12.1108 14.2727 12.6685 14.4304 12.9008 14.4304C12.9319 14.4304 12.9574 14.4271 12.9763 14.4216C13.1896 14.3471 13.3285 14.1738 13.4507 14.0205C13.4696 13.9971 13.4885 13.9727 13.5074 13.9494C13.6741 13.7483 13.754 13.4883 13.7296 13.2372Z" fill="url(#paint7_linear_2527_5963)"/>
+<defs>
+<linearGradient id="paint0_linear_2527_5963" x1="7.05125" y1="5.24154" x2="7.05125" y2="9.09679" gradientUnits="userSpaceOnUse">
+<stop offset="5.45058e-05" stop-color="#05080F"/>
+<stop offset="0.1125" stop-color="#070A15"/>
+<stop offset="0.2637" stop-color="#0B1026"/>
+<stop offset="0.4371" stop-color="#131A42"/>
+<stop offset="0.6268" stop-color="#1D286A"/>
+<stop offset="0.8276" stop-color="#2B399B"/>
+<stop offset="1" stop-color="#384ACC"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2527_5963" x1="7.0337" y1="11.5534" x2="7.0337" y2="16.1995" gradientUnits="userSpaceOnUse">
+<stop stop-color="#384ACC"/>
+<stop offset="0.216" stop-color="#3548BF"/>
+<stop offset="0.6146" stop-color="#2F449D"/>
+<stop offset="0.9606" stop-color="#283F7A"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2527_5963" x1="11.5837" y1="13.454" x2="14.2997" y2="13.454" gradientUnits="userSpaceOnUse">
+<stop stop-color="#384ACC"/>
+<stop offset="0.216" stop-color="#3548BF"/>
+<stop offset="0.6146" stop-color="#2F449D"/>
+<stop offset="0.9606" stop-color="#283F7A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2527_5963" x1="7.16707" y1="6.99769" x2="7.16707" y2="15.5653" gradientUnits="userSpaceOnUse">
+<stop offset="0.4878" stop-color="#F5F5F5"/>
+<stop offset="0.8314" stop-color="#BDBDBD"/>
+</linearGradient>
+<radialGradient id="paint4_radial_2527_5963" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.16688 9.48382) scale(4.4637 5.42027)">
+<stop offset="0.6895" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="#BDBDBD"/>
+</radialGradient>
+<linearGradient id="paint5_linear_2527_5963" x1="7.34839" y1="1.3312" x2="7.30164" y2="3.3886" gradientUnits="userSpaceOnUse">
+<stop offset="0.3696" stop-color="#3649BF"/>
+<stop offset="1" stop-color="#2C4585"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2527_5963" x1="7.09534" y1="3.32149" x2="7.09534" y2="7.41186" gradientUnits="userSpaceOnUse">
+<stop offset="0.2075" stop-color="#384ACC"/>
+<stop offset="1" stop-color="#1D3678"/>
+</linearGradient>
+<linearGradient id="paint7_linear_2527_5963" x1="10.7999" y1="12.2285" x2="13.4199" y2="13.9803" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="#E0BB95"/>
+<stop offset="1" stop-color="#CCA47A"/>
+</linearGradient>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/index.html b/examples/bedtime-story-teller/assets/index.html
new file mode 100644
index 0000000..f4e0e21
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/index.html
@@ -0,0 +1,231 @@
+<!--
+SPDX-FileCopyrightText: Copyright (C) ARDUINO SRL (http://www.arduino.cc)
+
+SPDX-License-Identifier: MPL-2.0
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bedtime Story Teller</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="play-area">
+        <div class="content-wrapper">
+            <div class="header">
+                <h1 class="arduino-text">Bedtime Story Teller</h1>
+                <img class="arduino-logo" src="./img/logo.svg" alt="Arduino Logo">
+            </div>
+
+            <div class="main-content">
+
+                        <h2 class="column-title">Set parameters</h2>
+
+                        <div></div> <!-- This is for the gap -->
+
+                        <div class="your-story-header">
+                            <h2 class="column-title">Your story</h2>
+                            <button id="clear-story-button" style="display: none;">New story</button>
+                        </div>
+
+                        <div class="container">
+
+                                        <div class="parameter-container">
+                                            <div class="parameter-header">
+                                                <h3 class="parameter-title">Age</h3>
+                                                <span class="selected-value"></span>
+                                                <img src="./img/arrow-right.svg" class="arrow-icon" alt="arrow icon">
+                                            </div>
+                                            <div class="parameter-content">
+                                                <div class="chips-container">
+                                                    <span class="chip">3-5 years</span>
+                                                    <span class="chip">6-8 years</span>
+                                                    <span class="chip">9-12 years</span>
+                                                    <span class="chip">13-16 years</span>
+                                                    <span class="chip">Adult</span>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="parameter-container">
+                                            <div class="parameter-header">
+                                                <h3 class="parameter-title">Theme</h3>
+                                                <span class="selected-value"></span>
+                                                <img src="./img/arrow-right.svg" class="arrow-icon" alt="arrow icon">
+                                            </div>
+                                            <div class="parameter-content">
+                                                <div class="chips-container">
+                                                    <span class="chip"><img src="./img/wizard.svg" alt="wizard icon"><span>Fantasy / Adventure</span></span>
+                                                    <span class="chip"><img src="./img/castle.svg" alt="castle icon"><span>Fairy tale</span></span>
+                                                    <span class="chip"><img src="./img/magic.svg" alt="magic icon"><span>Mistery / Horror</span></span>
+                                                    <span class="chip"><img src="./img/telescope.svg" alt="telescope icon"><span>Science / Universe</span></span>
+                                                    <span class="chip"><img src="./img/animal.svg" alt="animal icon"><span>Animals</span></span>
+                                                    <span class="chip"><img src="./img/comedy.svg" alt="comedy icon"><span>Comedy</span></span>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="parameter-container">
+                                            <div class="parameter-header">
+                                                <h3 class="parameter-title">Story type</h3>
+                                                <span class="optional-text story-type-selections">(optional)</span>
+                                                <img src="./img/arrow-right.svg" class="arrow-icon" alt="arrow icon">
+                                            </div>
+                                            <div class="parameter-content">
+                                                <div class="story-type-paragraph">
+                                                    <h4 class="paragraph-title">Tone</h4>
+                                                    <div class="chips-container">
+                                                        <span class="chip"><img src="./img/bear.svg" alt="bear icon"><span>Calm and sweet</span></span>
+                                                        <span class="chip"><img src="./img/sword.svg" alt="sword icon"><span>Epic and adventurous</span></span>
+                                                        <span class="chip"><img src="./img/fun.svg" alt="fun icon"><span>Cheerful and lively</span></span>
+                                                        <span class="chip"><img src="./img/magic.svg" alt="magic icon"><span>Misterious and curious</span></span>
+                                                        <span class="chip"><img src="./img/wizard.svg" alt="wizard icon"><span>Wise and thoughtful</span></span>
+                                                        <span class="chip"><img src="./img/ghost.svg" alt="ghost icon"><span>Tense and grotesque</span></span>
+                                                    </div>
+                                                </div>
+                                                <div class="story-type-paragraph">
+                                                    <h4 class="paragraph-title">Ending type</h4>
+                                                    <div class="chips-container">
+                                                        <span class="chip"><img src="./img/happy.svg" alt="happy icon"><span>Happy and reassuring</span></span>
+                                                        <span class="chip"><img src="./img/misterious.svg" alt="misterious icon"><span>Open and mysterious</span></span>
+                                                        <span class="chip"><img src="./img/doubt.svg" alt="doubt icon"><span>With a moral</span></span>
+                                                        <span class="chip"><img src="./img/hope.svg" alt="hope icon"><span>Dramatic but with hope</span></span>
+                                                    </div>
+                                                </div>
+                                                <div class="story-type-paragraph">
+                                                    <h4 class="paragraph-title">Narrative structure</h4>
+                                                    <div class="chips-container">
+                                                        <span class="chip"><img src="./img/castle.svg" alt="castle icon"><span>Classic</span></span>
+                                                        <span class="chip"><img src="./img/book.svg" alt="book icon"><span>Chapter based</span></span>
+                                                        <span class="chip"><img src="./img/tv.svg" alt="tv icon"><span>Episodic</span></span>
+                                                    </div>
+                                                </div>
+                                                <div class="story-type-paragraph">
+                                                    <h4 class="paragraph-title">Duration (min)</h4>
+                                                    <div class="chips-container">
+                                                        <span class="chip">Short 5 min</span>
+                                                        <span class="chip">Medium 10-15 min</span>
+                                                        <span class="chip">Long 20+ min</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="parameter-container">
+                                            <div class="parameter-header">
+                                                <h3 class="parameter-title">Characters</h3>
+                                                <span class="optional-text">(max 5)</span>
+                                                <img src="./img/arrow-right.svg" class="arrow-icon" alt="arrow icon">
+                                            </div>
+                                            <div class="parameter-content">
+                                                <div class="characters-list">
+                                                    <div class="character-input-group">
+                                                        <div class="character-inputs">
+                                                            <div class="character-first-row">
+                                                                <input type="text" placeholder="Name" class="character-name">
+                                                                <select class="character-role">
+                                                                    <option value="" disabled selected>Select role...</option>
+                                                                    <option value="protagonist">👑 Protagonist</option>
+                                                                    <option value="positive-helper">🧸 Positive helper</option>
+                                                                    <option value="antagonist">😈 Antagonist</option>
+                                                                    <option value="negative-helper">🐍 Negative helper</option>
+                                                                    <option value="other">🐧 Other characters</option>
+                                                                </select>
+                                                            </div>
+                                                            <div class="character-second-row">
+                                                                <input type="text" placeholder="Something about character traits, goals ..." class="character-description">
+                                                                <span class="optional-text">(optional)</span>
+                                                            </div>
+                                                        </div>
+                                                        <button class="delete-character-button" style="display: none;">
+                                                            <img src="./img/trash.svg" alt="delete character">
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                                <div class="add-character-container">
+                                                    <button class="add-character-button">Add character +</button>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="parameter-container">
+                                            <div class="parameter-header">
+                                                <h3 class="parameter-title">Other</h3>
+                                                <span class="optional-text">(optional)</span>
+                                                <img src="./img/arrow-right.svg" class="arrow-icon" alt="arrow icon">
+                                            </div>
+                                            <div class="parameter-content">
+                                                <textarea class="other-textarea" placeholder="Something else. For example: story is about managing emotions, main character is a squirrel, setting is in space …" maxlength="200"></textarea>
+                                                <div class="char-counter">0 / 200</div>
+                                            </div>
+                                        </div>
+
+                                        <button class="generate-story-button" style="display: none;">
+                                            Generate story <img src="./img/stars.svg" alt="stars icon">
+                                        </button>
+
+                                    </div>
+
+                        <div class="story-output-container">
+                            <div class="story-output-placeholder">
+                                <p>Set parameters to generate story</p>
+                                <p>or</p>
+                                <button id="generate-randomly-button" class="generate-randomly-button">Generate Randomly</button>
+                            </div>
+                            <div id="story-response-area" style="display: none;">
+                                <div id="loading-spinner" class="spinner" style="display: none;"></div>
+                                <div class="parameter-container" id="prompt-container" style="display: none;">
+                                    <div class="parameter-header">
+                                        <h3 class="parameter-title">Prompt</h3>
+                                        <img src="./img/arrow-right.svg" class="arrow-icon" alt="arrow icon">
+                                    </div>
+                                    <div class="parameter-content">
+                                        <div id="prompt-display" class="response-content"></div>
+                                    </div>
+                                </div>
+                                <div class="response-container" id="story-container" style="display: none;">
+                                    <div class="response-header">
+                                        <h3 class="response-title">Story</h3>
+                                        <div class="response-header-buttons">
+                                            <button id="copy-story-button" class="icon-button">
+                                                Copy <img src="./img/copy.svg" alt="copy icon">
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div id="story-response" class="response-content"></div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+        </div>
+    </div>
+
+    <div id="new-story-modal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-body-title">New Story</h2>
+                <span class="close-button">&times;</span>
+            </div>
+            <div class="modal-body">
+                <p>Creating a new story will delete the existing one, Are you sure? This action cannot be undone.</p>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure?</p>
+            </div>
+            <div class="modal-body-small">
+                <p>This action cannot be undone.</p>
+            </div>
+            <div class="modal-footer">
+                <button id="confirm-new-story-button" class="primary-button">Create new story</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="libs/socket.io.min.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/examples/bedtime-story-teller/assets/libs/socket.io.min.js b/examples/bedtime-story-teller/assets/libs/socket.io.min.js
new file mode 100644
index 0000000..530b185
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/libs/socket.io.min.js
@@ -0,0 +1,6 @@
+/*!
+ * Socket.IO v4.8.1
+ * (c) 2014-2024 Guillermo Rauch
+ * Released under the MIT License.
+ */
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).io=n()}(this,(function(){"use strict";function t(t,n){(null==n||n>t.length)&&(n=t.length);for(var i=0,r=Array(n);i<n;i++)r[i]=t[i];return r}function n(t,n){for(var i=0;i<n.length;i++){var r=n[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,f(r.key),r)}}function i(t,i,r){return i&&n(t.prototype,i),r&&n(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t}function r(n,i){var r="undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(!r){if(Array.isArray(n)||(r=function(n,i){if(n){if("string"==typeof n)return t(n,i);var r={}.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(n,i):void 0}}(n))||i&&n&&"number"==typeof n.length){r&&(n=r);var e=0,o=function(){};return{s:o,n:function(){return e>=n.length?{done:!0}:{done:!1,value:n[e++]}},e:function(t){throw t},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,u=!0,h=!1;return{s:function(){r=r.call(n)},n:function(){var t=r.next();return u=t.done,t},e:function(t){h=!0,s=t},f:function(){try{u||null==r.return||r.return()}finally{if(h)throw s}}}}function e(){return e=Object.assign?Object.assign.bind():function(t){for(var n=1;n<arguments.length;n++){var i=arguments[n];for(var r in i)({}).hasOwnProperty.call(i,r)&&(t[r]=i[r])}return t},e.apply(null,arguments)}function o(t){return o=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},o(t)}function s(t,n){t.prototype=Object.create(n.prototype),t.prototype.constructor=t,h(t,n)}function u(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(u=function(){return!!t})()}function h(t,n){return h=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,n){return t.__proto__=n,t},h(t,n)}function f(t){var n=function(t,n){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,n||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"==typeof n?n:n+""}function c(t){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c(t)}function a(t){var n="function"==typeof Map?new Map:void 0;return a=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(n){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,i)}function i(){return function(t,n,i){if(u())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,n);var e=new(t.bind.apply(t,r));return i&&h(e,i.prototype),e}(t,arguments,o(this).constructor)}return i.prototype=Object.create(t.prototype,{constructor:{value:i,enumerable:!1,writable:!0,configurable:!0}}),h(i,t)},a(t)}var v=Object.create(null);v.open="0",v.close="1",v.ping="2",v.pong="3",v.message="4",v.upgrade="5",v.noop="6";var l=Object.create(null);Object.keys(v).forEach((function(t){l[v[t]]=t}));var p,d={type:"error",data:"parser error"},y="function"==typeof Blob||"undefined"!=typeof Blob&&"[object BlobConstructor]"===Object.prototype.toString.call(Blob),b="function"==typeof ArrayBuffer,w=function(t){return"function"==typeof ArrayBuffer.isView?ArrayBuffer.isView(t):t&&t.buffer instanceof ArrayBuffer},g=function(t,n,i){var r=t.type,e=t.data;return y&&e instanceof Blob?n?i(e):m(e,i):b&&(e instanceof ArrayBuffer||w(e))?n?i(e):m(new Blob([e]),i):i(v[r]+(e||""))},m=function(t,n){var i=new FileReader;return i.onload=function(){var t=i.result.split(",")[1];n("b"+(t||""))},i.readAsDataURL(t)};function k(t){return t instanceof Uint8Array?t:t instanceof ArrayBuffer?new Uint8Array(t):new Uint8Array(t.buffer,t.byteOffset,t.byteLength)}for(var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",j="undefined"==typeof Uint8Array?[]:new Uint8Array(256),E=0;E<64;E++)j[A.charCodeAt(E)]=E;var O,B="function"==typeof ArrayBuffer,S=function(t,n){if("string"!=typeof t)return{type:"message",data:C(t,n)};var i=t.charAt(0);return"b"===i?{type:"message",data:N(t.substring(1),n)}:l[i]?t.length>1?{type:l[i],data:t.substring(1)}:{type:l[i]}:d},N=function(t,n){if(B){var i=function(t){var n,i,r,e,o,s=.75*t.length,u=t.length,h=0;"="===t[t.length-1]&&(s--,"="===t[t.length-2]&&s--);var f=new ArrayBuffer(s),c=new Uint8Array(f);for(n=0;n<u;n+=4)i=j[t.charCodeAt(n)],r=j[t.charCodeAt(n+1)],e=j[t.charCodeAt(n+2)],o=j[t.charCodeAt(n+3)],c[h++]=i<<2|r>>4,c[h++]=(15&r)<<4|e>>2,c[h++]=(3&e)<<6|63&o;return f}(t);return C(i,n)}return{base64:!0,data:t}},C=function(t,n){return"blob"===n?t instanceof Blob?t:new Blob([t]):t instanceof ArrayBuffer?t:t.buffer},T=String.fromCharCode(30);function U(){return new TransformStream({transform:function(t,n){!function(t,n){y&&t.data instanceof Blob?t.data.arrayBuffer().then(k).then(n):b&&(t.data instanceof ArrayBuffer||w(t.data))?n(k(t.data)):g(t,!1,(function(t){p||(p=new TextEncoder),n(p.encode(t))}))}(t,(function(i){var r,e=i.length;if(e<126)r=new Uint8Array(1),new DataView(r.buffer).setUint8(0,e);else if(e<65536){r=new Uint8Array(3);var o=new DataView(r.buffer);o.setUint8(0,126),o.setUint16(1,e)}else{r=new Uint8Array(9);var s=new DataView(r.buffer);s.setUint8(0,127),s.setBigUint64(1,BigInt(e))}t.data&&"string"!=typeof t.data&&(r[0]|=128),n.enqueue(r),n.enqueue(i)}))}})}function M(t){return t.reduce((function(t,n){return t+n.length}),0)}function x(t,n){if(t[0].length===n)return t.shift();for(var i=new Uint8Array(n),r=0,e=0;e<n;e++)i[e]=t[0][r++],r===t[0].length&&(t.shift(),r=0);return t.length&&r<t[0].length&&(t[0]=t[0].slice(r)),i}function I(t){if(t)return function(t){for(var n in I.prototype)t[n]=I.prototype[n];return t}(t)}I.prototype.on=I.prototype.addEventListener=function(t,n){return this.t=this.t||{},(this.t["$"+t]=this.t["$"+t]||[]).push(n),this},I.prototype.once=function(t,n){function i(){this.off(t,i),n.apply(this,arguments)}return i.fn=n,this.on(t,i),this},I.prototype.off=I.prototype.removeListener=I.prototype.removeAllListeners=I.prototype.removeEventListener=function(t,n){if(this.t=this.t||{},0==arguments.length)return this.t={},this;var i,r=this.t["$"+t];if(!r)return this;if(1==arguments.length)return delete this.t["$"+t],this;for(var e=0;e<r.length;e++)if((i=r[e])===n||i.fn===n){r.splice(e,1);break}return 0===r.length&&delete this.t["$"+t],this},I.prototype.emit=function(t){this.t=this.t||{};for(var n=new Array(arguments.length-1),i=this.t["$"+t],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(i){r=0;for(var e=(i=i.slice(0)).length;r<e;++r)i[r].apply(this,n)}return this},I.prototype.emitReserved=I.prototype.emit,I.prototype.listeners=function(t){return this.t=this.t||{},this.t["$"+t]||[]},I.prototype.hasListeners=function(t){return!!this.listeners(t).length};var R="function"==typeof Promise&&"function"==typeof Promise.resolve?function(t){return Promise.resolve().then(t)}:function(t,n){return n(t,0)},L="undefined"!=typeof self?self:"undefined"!=typeof window?window:Function("return this")();function _(t){for(var n=arguments.length,i=new Array(n>1?n-1:0),r=1;r<n;r++)i[r-1]=arguments[r];return i.reduce((function(n,i){return t.hasOwnProperty(i)&&(n[i]=t[i]),n}),{})}var D=L.setTimeout,P=L.clearTimeout;function $(t,n){n.useNativeTimers?(t.setTimeoutFn=D.bind(L),t.clearTimeoutFn=P.bind(L)):(t.setTimeoutFn=L.setTimeout.bind(L),t.clearTimeoutFn=L.clearTimeout.bind(L))}function F(){return Date.now().toString(36).substring(3)+Math.random().toString(36).substring(2,5)}var V=function(t){function n(n,i,r){var e;return(e=t.call(this,n)||this).description=i,e.context=r,e.type="TransportError",e}return s(n,t),n}(a(Error)),q=function(t){function n(n){var i;return(i=t.call(this)||this).writable=!1,$(i,n),i.opts=n,i.query=n.query,i.socket=n.socket,i.supportsBinary=!n.forceBase64,i}s(n,t);var i=n.prototype;return i.onError=function(n,i,r){return t.prototype.emitReserved.call(this,"error",new V(n,i,r)),this},i.open=function(){return this.readyState="opening",this.doOpen(),this},i.close=function(){return"opening"!==this.readyState&&"open"!==this.readyState||(this.doClose(),this.onClose()),this},i.send=function(t){"open"===this.readyState&&this.write(t)},i.onOpen=function(){this.readyState="open",this.writable=!0,t.prototype.emitReserved.call(this,"open")},i.onData=function(t){var n=S(t,this.socket.binaryType);this.onPacket(n)},i.onPacket=function(n){t.prototype.emitReserved.call(this,"packet",n)},i.onClose=function(n){this.readyState="closed",t.prototype.emitReserved.call(this,"close",n)},i.pause=function(t){},i.createUri=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t+"://"+this.i()+this.o()+this.opts.path+this.u(n)},i.i=function(){var t=this.opts.hostname;return-1===t.indexOf(":")?t:"["+t+"]"},i.o=function(){return this.opts.port&&(this.opts.secure&&Number(443!==this.opts.port)||!this.opts.secure&&80!==Number(this.opts.port))?":"+this.opts.port:""},i.u=function(t){var n=function(t){var n="";for(var i in t)t.hasOwnProperty(i)&&(n.length&&(n+="&"),n+=encodeURIComponent(i)+"="+encodeURIComponent(t[i]));return n}(t);return n.length?"?"+n:""},n}(I),X=function(t){function n(){var n;return(n=t.apply(this,arguments)||this).h=!1,n}s(n,t);var r=n.prototype;return r.doOpen=function(){this.v()},r.pause=function(t){var n=this;this.readyState="pausing";var i=function(){n.readyState="paused",t()};if(this.h||!this.writable){var r=0;this.h&&(r++,this.once("pollComplete",(function(){--r||i()}))),this.writable||(r++,this.once("drain",(function(){--r||i()})))}else i()},r.v=function(){this.h=!0,this.doPoll(),this.emitReserved("poll")},r.onData=function(t){var n=this;(function(t,n){for(var i=t.split(T),r=[],e=0;e<i.length;e++){var o=S(i[e],n);if(r.push(o),"error"===o.type)break}return r})(t,this.socket.binaryType).forEach((function(t){if("opening"===n.readyState&&"open"===t.type&&n.onOpen(),"close"===t.type)return n.onClose({description:"transport closed by the server"}),!1;n.onPacket(t)})),"closed"!==this.readyState&&(this.h=!1,this.emitReserved("pollComplete"),"open"===this.readyState&&this.v())},r.doClose=function(){var t=this,n=function(){t.write([{type:"close"}])};"open"===this.readyState?n():this.once("open",n)},r.write=function(t){var n=this;this.writable=!1,function(t,n){var i=t.length,r=new Array(i),e=0;t.forEach((function(t,o){g(t,!1,(function(t){r[o]=t,++e===i&&n(r.join(T))}))}))}(t,(function(t){n.doWrite(t,(function(){n.writable=!0,n.emitReserved("drain")}))}))},r.uri=function(){var t=this.opts.secure?"https":"http",n=this.query||{};return!1!==this.opts.timestampRequests&&(n[this.opts.timestampParam]=F()),this.supportsBinary||n.sid||(n.b64=1),this.createUri(t,n)},i(n,[{key:"name",get:function(){return"polling"}}])}(q),H=!1;try{H="undefined"!=typeof XMLHttpRequest&&"withCredentials"in new XMLHttpRequest}catch(t){}var z=H;function J(){}var K=function(t){function n(n){var i;if(i=t.call(this,n)||this,"undefined"!=typeof location){var r="https:"===location.protocol,e=location.port;e||(e=r?"443":"80"),i.xd="undefined"!=typeof location&&n.hostname!==location.hostname||e!==n.port}return i}s(n,t);var i=n.prototype;return i.doWrite=function(t,n){var i=this,r=this.request({method:"POST",data:t});r.on("success",n),r.on("error",(function(t,n){i.onError("xhr post error",t,n)}))},i.doPoll=function(){var t=this,n=this.request();n.on("data",this.onData.bind(this)),n.on("error",(function(n,i){t.onError("xhr poll error",n,i)})),this.pollXhr=n},n}(X),Y=function(t){function n(n,i,r){var e;return(e=t.call(this)||this).createRequest=n,$(e,r),e.l=r,e.p=r.method||"GET",e.m=i,e.k=void 0!==r.data?r.data:null,e.A(),e}s(n,t);var i=n.prototype;return i.A=function(){var t,i=this,r=_(this.l,"agent","pfx","key","passphrase","cert","ca","ciphers","rejectUnauthorized","autoUnref");r.xdomain=!!this.l.xd;var e=this.j=this.createRequest(r);try{e.open(this.p,this.m,!0);try{if(this.l.extraHeaders)for(var o in e.setDisableHeaderCheck&&e.setDisableHeaderCheck(!0),this.l.extraHeaders)this.l.extraHeaders.hasOwnProperty(o)&&e.setRequestHeader(o,this.l.extraHeaders[o])}catch(t){}if("POST"===this.p)try{e.setRequestHeader("Content-type","text/plain;charset=UTF-8")}catch(t){}try{e.setRequestHeader("Accept","*/*")}catch(t){}null===(t=this.l.cookieJar)||void 0===t||t.addCookies(e),"withCredentials"in e&&(e.withCredentials=this.l.withCredentials),this.l.requestTimeout&&(e.timeout=this.l.requestTimeout),e.onreadystatechange=function(){var t;3===e.readyState&&(null===(t=i.l.cookieJar)||void 0===t||t.parseCookies(e.getResponseHeader("set-cookie"))),4===e.readyState&&(200===e.status||1223===e.status?i.O():i.setTimeoutFn((function(){i.B("number"==typeof e.status?e.status:0)}),0))},e.send(this.k)}catch(t){return void this.setTimeoutFn((function(){i.B(t)}),0)}"undefined"!=typeof document&&(this.S=n.requestsCount++,n.requests[this.S]=this)},i.B=function(t){this.emitReserved("error",t,this.j),this.N(!0)},i.N=function(t){if(void 0!==this.j&&null!==this.j){if(this.j.onreadystatechange=J,t)try{this.j.abort()}catch(t){}"undefined"!=typeof document&&delete n.requests[this.S],this.j=null}},i.O=function(){var t=this.j.responseText;null!==t&&(this.emitReserved("data",t),this.emitReserved("success"),this.N())},i.abort=function(){this.N()},n}(I);if(Y.requestsCount=0,Y.requests={},"undefined"!=typeof document)if("function"==typeof attachEvent)attachEvent("onunload",G);else if("function"==typeof addEventListener){addEventListener("onpagehide"in L?"pagehide":"unload",G,!1)}function G(){for(var t in Y.requests)Y.requests.hasOwnProperty(t)&&Y.requests[t].abort()}var Q,W=(Q=tt({xdomain:!1}))&&null!==Q.responseType,Z=function(t){function n(n){var i;i=t.call(this,n)||this;var r=n&&n.forceBase64;return i.supportsBinary=W&&!r,i}return s(n,t),n.prototype.request=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return e(t,{xd:this.xd},this.opts),new Y(tt,this.uri(),t)},n}(K);function tt(t){var n=t.xdomain;try{if("undefined"!=typeof XMLHttpRequest&&(!n||z))return new XMLHttpRequest}catch(t){}if(!n)try{return new(L[["Active"].concat("Object").join("X")])("Microsoft.XMLHTTP")}catch(t){}}var nt="undefined"!=typeof navigator&&"string"==typeof navigator.product&&"reactnative"===navigator.product.toLowerCase(),it=function(t){function n(){return t.apply(this,arguments)||this}s(n,t);var r=n.prototype;return r.doOpen=function(){var t=this.uri(),n=this.opts.protocols,i=nt?{}:_(this.opts,"agent","perMessageDeflate","pfx","key","passphrase","cert","ca","ciphers","rejectUnauthorized","localAddress","protocolVersion","origin","maxPayload","family","checkServerIdentity");this.opts.extraHeaders&&(i.headers=this.opts.extraHeaders);try{this.ws=this.createSocket(t,n,i)}catch(t){return this.emitReserved("error",t)}this.ws.binaryType=this.socket.binaryType,this.addEventListeners()},r.addEventListeners=function(){var t=this;this.ws.onopen=function(){t.opts.autoUnref&&t.ws.C.unref(),t.onOpen()},this.ws.onclose=function(n){return t.onClose({description:"websocket connection closed",context:n})},this.ws.onmessage=function(n){return t.onData(n.data)},this.ws.onerror=function(n){return t.onError("websocket error",n)}},r.write=function(t){var n=this;this.writable=!1;for(var i=function(){var i=t[r],e=r===t.length-1;g(i,n.supportsBinary,(function(t){try{n.doWrite(i,t)}catch(t){}e&&R((function(){n.writable=!0,n.emitReserved("drain")}),n.setTimeoutFn)}))},r=0;r<t.length;r++)i()},r.doClose=function(){void 0!==this.ws&&(this.ws.onerror=function(){},this.ws.close(),this.ws=null)},r.uri=function(){var t=this.opts.secure?"wss":"ws",n=this.query||{};return this.opts.timestampRequests&&(n[this.opts.timestampParam]=F()),this.supportsBinary||(n.b64=1),this.createUri(t,n)},i(n,[{key:"name",get:function(){return"websocket"}}])}(q),rt=L.WebSocket||L.MozWebSocket,et=function(t){function n(){return t.apply(this,arguments)||this}s(n,t);var i=n.prototype;return i.createSocket=function(t,n,i){return nt?new rt(t,n,i):n?new rt(t,n):new rt(t)},i.doWrite=function(t,n){this.ws.send(n)},n}(it),ot=function(t){function n(){return t.apply(this,arguments)||this}s(n,t);var r=n.prototype;return r.doOpen=function(){var t=this;try{this.T=new WebTransport(this.createUri("https"),this.opts.transportOptions[this.name])}catch(t){return this.emitReserved("error",t)}this.T.closed.then((function(){t.onClose()})).catch((function(n){t.onError("webtransport error",n)})),this.T.ready.then((function(){t.T.createBidirectionalStream().then((function(n){var i=function(t,n){O||(O=new TextDecoder);var i=[],r=0,e=-1,o=!1;return new TransformStream({transform:function(s,u){for(i.push(s);;){if(0===r){if(M(i)<1)break;var h=x(i,1);o=!(128&~h[0]),e=127&h[0],r=e<126?3:126===e?1:2}else if(1===r){if(M(i)<2)break;var f=x(i,2);e=new DataView(f.buffer,f.byteOffset,f.length).getUint16(0),r=3}else if(2===r){if(M(i)<8)break;var c=x(i,8),a=new DataView(c.buffer,c.byteOffset,c.length),v=a.getUint32(0);if(v>Math.pow(2,21)-1){u.enqueue(d);break}e=v*Math.pow(2,32)+a.getUint32(4),r=3}else{if(M(i)<e)break;var l=x(i,e);u.enqueue(S(o?l:O.decode(l),n)),r=0}if(0===e||e>t){u.enqueue(d);break}}}})}(Number.MAX_SAFE_INTEGER,t.socket.binaryType),r=n.readable.pipeThrough(i).getReader(),e=U();e.readable.pipeTo(n.writable),t.U=e.writable.getWriter();!function n(){r.read().then((function(i){var r=i.done,e=i.value;r||(t.onPacket(e),n())})).catch((function(t){}))}();var o={type:"open"};t.query.sid&&(o.data='{"sid":"'.concat(t.query.sid,'"}')),t.U.write(o).then((function(){return t.onOpen()}))}))}))},r.write=function(t){var n=this;this.writable=!1;for(var i=function(){var i=t[r],e=r===t.length-1;n.U.write(i).then((function(){e&&R((function(){n.writable=!0,n.emitReserved("drain")}),n.setTimeoutFn)}))},r=0;r<t.length;r++)i()},r.doClose=function(){var t;null===(t=this.T)||void 0===t||t.close()},i(n,[{key:"name",get:function(){return"webtransport"}}])}(q),st={websocket:et,webtransport:ot,polling:Z},ut=/^(?:(?![^:@\/?#]+:[^:@\/]*@)(http|https|ws|wss):\/\/)?((?:(([^:@\/?#]*)(?::([^:@\/?#]*))?)?@)?((?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}|[^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/,ht=["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"];function ft(t){if(t.length>8e3)throw"URI too long";var n=t,i=t.indexOf("["),r=t.indexOf("]");-1!=i&&-1!=r&&(t=t.substring(0,i)+t.substring(i,r).replace(/:/g,";")+t.substring(r,t.length));for(var e,o,s=ut.exec(t||""),u={},h=14;h--;)u[ht[h]]=s[h]||"";return-1!=i&&-1!=r&&(u.source=n,u.host=u.host.substring(1,u.host.length-1).replace(/;/g,":"),u.authority=u.authority.replace("[","").replace("]","").replace(/;/g,":"),u.ipv6uri=!0),u.pathNames=function(t,n){var i=/\/{2,9}/g,r=n.replace(i,"/").split("/");"/"!=n.slice(0,1)&&0!==n.length||r.splice(0,1);"/"==n.slice(-1)&&r.splice(r.length-1,1);return r}(0,u.path),u.queryKey=(e=u.query,o={},e.replace(/(?:^|&)([^&=]*)=?([^&]*)/g,(function(t,n,i){n&&(o[n]=i)})),o),u}var ct="function"==typeof addEventListener&&"function"==typeof removeEventListener,at=[];ct&&addEventListener("offline",(function(){at.forEach((function(t){return t()}))}),!1);var vt=function(t){function n(n,i){var r;if((r=t.call(this)||this).binaryType="arraybuffer",r.writeBuffer=[],r.M=0,r.I=-1,r.R=-1,r.L=-1,r._=1/0,n&&"object"===c(n)&&(i=n,n=null),n){var o=ft(n);i.hostname=o.host,i.secure="https"===o.protocol||"wss"===o.protocol,i.port=o.port,o.query&&(i.query=o.query)}else i.host&&(i.hostname=ft(i.host).host);return $(r,i),r.secure=null!=i.secure?i.secure:"undefined"!=typeof location&&"https:"===location.protocol,i.hostname&&!i.port&&(i.port=r.secure?"443":"80"),r.hostname=i.hostname||("undefined"!=typeof location?location.hostname:"localhost"),r.port=i.port||("undefined"!=typeof location&&location.port?location.port:r.secure?"443":"80"),r.transports=[],r.D={},i.transports.forEach((function(t){var n=t.prototype.name;r.transports.push(n),r.D[n]=t})),r.opts=e({path:"/engine.io",agent:!1,withCredentials:!1,upgrade:!0,timestampParam:"t",rememberUpgrade:!1,addTrailingSlash:!0,rejectUnauthorized:!0,perMessageDeflate:{threshold:1024},transportOptions:{},closeOnBeforeunload:!1},i),r.opts.path=r.opts.path.replace(/\/$/,"")+(r.opts.addTrailingSlash?"/":""),"string"==typeof r.opts.query&&(r.opts.query=function(t){for(var n={},i=t.split("&"),r=0,e=i.length;r<e;r++){var o=i[r].split("=");n[decodeURIComponent(o[0])]=decodeURIComponent(o[1])}return n}(r.opts.query)),ct&&(r.opts.closeOnBeforeunload&&(r.P=function(){r.transport&&(r.transport.removeAllListeners(),r.transport.close())},addEventListener("beforeunload",r.P,!1)),"localhost"!==r.hostname&&(r.$=function(){r.F("transport close",{description:"network connection lost"})},at.push(r.$))),r.opts.withCredentials&&(r.V=void 0),r.q(),r}s(n,t);var i=n.prototype;return i.createTransport=function(t){var n=e({},this.opts.query);n.EIO=4,n.transport=t,this.id&&(n.sid=this.id);var i=e({},this.opts,{query:n,socket:this,hostname:this.hostname,secure:this.secure,port:this.port},this.opts.transportOptions[t]);return new this.D[t](i)},i.q=function(){var t=this;if(0!==this.transports.length){var i=this.opts.rememberUpgrade&&n.priorWebsocketSuccess&&-1!==this.transports.indexOf("websocket")?"websocket":this.transports[0];this.readyState="opening";var r=this.createTransport(i);r.open(),this.setTransport(r)}else this.setTimeoutFn((function(){t.emitReserved("error","No transports available")}),0)},i.setTransport=function(t){var n=this;this.transport&&this.transport.removeAllListeners(),this.transport=t,t.on("drain",this.X.bind(this)).on("packet",this.H.bind(this)).on("error",this.B.bind(this)).on("close",(function(t){return n.F("transport close",t)}))},i.onOpen=function(){this.readyState="open",n.priorWebsocketSuccess="websocket"===this.transport.name,this.emitReserved("open"),this.flush()},i.H=function(t){if("opening"===this.readyState||"open"===this.readyState||"closing"===this.readyState)switch(this.emitReserved("packet",t),this.emitReserved("heartbeat"),t.type){case"open":this.onHandshake(JSON.parse(t.data));break;case"ping":this.J("pong"),this.emitReserved("ping"),this.emitReserved("pong"),this.K();break;case"error":var n=new Error("server error");n.code=t.data,this.B(n);break;case"message":this.emitReserved("data",t.data),this.emitReserved("message",t.data)}},i.onHandshake=function(t){this.emitReserved("handshake",t),this.id=t.sid,this.transport.query.sid=t.sid,this.I=t.pingInterval,this.R=t.pingTimeout,this.L=t.maxPayload,this.onOpen(),"closed"!==this.readyState&&this.K()},i.K=function(){var t=this;this.clearTimeoutFn(this.Y);var n=this.I+this.R;this._=Date.now()+n,this.Y=this.setTimeoutFn((function(){t.F("ping timeout")}),n),this.opts.autoUnref&&this.Y.unref()},i.X=function(){this.writeBuffer.splice(0,this.M),this.M=0,0===this.writeBuffer.length?this.emitReserved("drain"):this.flush()},i.flush=function(){if("closed"!==this.readyState&&this.transport.writable&&!this.upgrading&&this.writeBuffer.length){var t=this.G();this.transport.send(t),this.M=t.length,this.emitReserved("flush")}},i.G=function(){if(!(this.L&&"polling"===this.transport.name&&this.writeBuffer.length>1))return this.writeBuffer;for(var t,n=1,i=0;i<this.writeBuffer.length;i++){var r=this.writeBuffer[i].data;if(r&&(n+="string"==typeof(t=r)?function(t){for(var n=0,i=0,r=0,e=t.length;r<e;r++)(n=t.charCodeAt(r))<128?i+=1:n<2048?i+=2:n<55296||n>=57344?i+=3:(r++,i+=4);return i}(t):Math.ceil(1.33*(t.byteLength||t.size))),i>0&&n>this.L)return this.writeBuffer.slice(0,i);n+=2}return this.writeBuffer},i.W=function(){var t=this;if(!this._)return!0;var n=Date.now()>this._;return n&&(this._=0,R((function(){t.F("ping timeout")}),this.setTimeoutFn)),n},i.write=function(t,n,i){return this.J("message",t,n,i),this},i.send=function(t,n,i){return this.J("message",t,n,i),this},i.J=function(t,n,i,r){if("function"==typeof n&&(r=n,n=void 0),"function"==typeof i&&(r=i,i=null),"closing"!==this.readyState&&"closed"!==this.readyState){(i=i||{}).compress=!1!==i.compress;var e={type:t,data:n,options:i};this.emitReserved("packetCreate",e),this.writeBuffer.push(e),r&&this.once("flush",r),this.flush()}},i.close=function(){var t=this,n=function(){t.F("forced close"),t.transport.close()},i=function i(){t.off("upgrade",i),t.off("upgradeError",i),n()},r=function(){t.once("upgrade",i),t.once("upgradeError",i)};return"opening"!==this.readyState&&"open"!==this.readyState||(this.readyState="closing",this.writeBuffer.length?this.once("drain",(function(){t.upgrading?r():n()})):this.upgrading?r():n()),this},i.B=function(t){if(n.priorWebsocketSuccess=!1,this.opts.tryAllTransports&&this.transports.length>1&&"opening"===this.readyState)return this.transports.shift(),this.q();this.emitReserved("error",t),this.F("transport error",t)},i.F=function(t,n){if("opening"===this.readyState||"open"===this.readyState||"closing"===this.readyState){if(this.clearTimeoutFn(this.Y),this.transport.removeAllListeners("close"),this.transport.close(),this.transport.removeAllListeners(),ct&&(this.P&&removeEventListener("beforeunload",this.P,!1),this.$)){var i=at.indexOf(this.$);-1!==i&&at.splice(i,1)}this.readyState="closed",this.id=null,this.emitReserved("close",t,n),this.writeBuffer=[],this.M=0}},n}(I);vt.protocol=4;var lt=function(t){function n(){var n;return(n=t.apply(this,arguments)||this).Z=[],n}s(n,t);var i=n.prototype;return i.onOpen=function(){if(t.prototype.onOpen.call(this),"open"===this.readyState&&this.opts.upgrade)for(var n=0;n<this.Z.length;n++)this.tt(this.Z[n])},i.tt=function(t){var n=this,i=this.createTransport(t),r=!1;vt.priorWebsocketSuccess=!1;var e=function(){r||(i.send([{type:"ping",data:"probe"}]),i.once("packet",(function(t){if(!r)if("pong"===t.type&&"probe"===t.data){if(n.upgrading=!0,n.emitReserved("upgrading",i),!i)return;vt.priorWebsocketSuccess="websocket"===i.name,n.transport.pause((function(){r||"closed"!==n.readyState&&(c(),n.setTransport(i),i.send([{type:"upgrade"}]),n.emitReserved("upgrade",i),i=null,n.upgrading=!1,n.flush())}))}else{var e=new Error("probe error");e.transport=i.name,n.emitReserved("upgradeError",e)}})))};function o(){r||(r=!0,c(),i.close(),i=null)}var s=function(t){var r=new Error("probe error: "+t);r.transport=i.name,o(),n.emitReserved("upgradeError",r)};function u(){s("transport closed")}function h(){s("socket closed")}function f(t){i&&t.name!==i.name&&o()}var c=function(){i.removeListener("open",e),i.removeListener("error",s),i.removeListener("close",u),n.off("close",h),n.off("upgrading",f)};i.once("open",e),i.once("error",s),i.once("close",u),this.once("close",h),this.once("upgrading",f),-1!==this.Z.indexOf("webtransport")&&"webtransport"!==t?this.setTimeoutFn((function(){r||i.open()}),200):i.open()},i.onHandshake=function(n){this.Z=this.nt(n.upgrades),t.prototype.onHandshake.call(this,n)},i.nt=function(t){for(var n=[],i=0;i<t.length;i++)~this.transports.indexOf(t[i])&&n.push(t[i]);return n},n}(vt),pt=function(t){function n(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r="object"===c(n)?n:i;return(!r.transports||r.transports&&"string"==typeof r.transports[0])&&(r.transports=(r.transports||["polling","websocket","webtransport"]).map((function(t){return st[t]})).filter((function(t){return!!t}))),t.call(this,n,r)||this}return s(n,t),n}(lt);pt.protocol;var dt="function"==typeof ArrayBuffer,yt=function(t){return"function"==typeof ArrayBuffer.isView?ArrayBuffer.isView(t):t.buffer instanceof ArrayBuffer},bt=Object.prototype.toString,wt="function"==typeof Blob||"undefined"!=typeof Blob&&"[object BlobConstructor]"===bt.call(Blob),gt="function"==typeof File||"undefined"!=typeof File&&"[object FileConstructor]"===bt.call(File);function mt(t){return dt&&(t instanceof ArrayBuffer||yt(t))||wt&&t instanceof Blob||gt&&t instanceof File}function kt(t,n){if(!t||"object"!==c(t))return!1;if(Array.isArray(t)){for(var i=0,r=t.length;i<r;i++)if(kt(t[i]))return!0;return!1}if(mt(t))return!0;if(t.toJSON&&"function"==typeof t.toJSON&&1===arguments.length)return kt(t.toJSON(),!0);for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e)&&kt(t[e]))return!0;return!1}function At(t){var n=[],i=t.data,r=t;return r.data=jt(i,n),r.attachments=n.length,{packet:r,buffers:n}}function jt(t,n){if(!t)return t;if(mt(t)){var i={_placeholder:!0,num:n.length};return n.push(t),i}if(Array.isArray(t)){for(var r=new Array(t.length),e=0;e<t.length;e++)r[e]=jt(t[e],n);return r}if("object"===c(t)&&!(t instanceof Date)){var o={};for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&(o[s]=jt(t[s],n));return o}return t}function Et(t,n){return t.data=Ot(t.data,n),delete t.attachments,t}function Ot(t,n){if(!t)return t;if(t&&!0===t._placeholder){if("number"==typeof t.num&&t.num>=0&&t.num<n.length)return n[t.num];throw new Error("illegal attachments")}if(Array.isArray(t))for(var i=0;i<t.length;i++)t[i]=Ot(t[i],n);else if("object"===c(t))for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(t[r]=Ot(t[r],n));return t}var Bt,St=["connect","connect_error","disconnect","disconnecting","newListener","removeListener"];!function(t){t[t.CONNECT=0]="CONNECT",t[t.DISCONNECT=1]="DISCONNECT",t[t.EVENT=2]="EVENT",t[t.ACK=3]="ACK",t[t.CONNECT_ERROR=4]="CONNECT_ERROR",t[t.BINARY_EVENT=5]="BINARY_EVENT",t[t.BINARY_ACK=6]="BINARY_ACK"}(Bt||(Bt={}));var Nt=function(){function t(t){this.replacer=t}var n=t.prototype;return n.encode=function(t){return t.type!==Bt.EVENT&&t.type!==Bt.ACK||!kt(t)?[this.encodeAsString(t)]:this.encodeAsBinary({type:t.type===Bt.EVENT?Bt.BINARY_EVENT:Bt.BINARY_ACK,nsp:t.nsp,data:t.data,id:t.id})},n.encodeAsString=function(t){var n=""+t.type;return t.type!==Bt.BINARY_EVENT&&t.type!==Bt.BINARY_ACK||(n+=t.attachments+"-"),t.nsp&&"/"!==t.nsp&&(n+=t.nsp+","),null!=t.id&&(n+=t.id),null!=t.data&&(n+=JSON.stringify(t.data,this.replacer)),n},n.encodeAsBinary=function(t){var n=At(t),i=this.encodeAsString(n.packet),r=n.buffers;return r.unshift(i),r},t}(),Ct=function(t){function n(n){var i;return(i=t.call(this)||this).reviver=n,i}s(n,t);var i=n.prototype;return i.add=function(n){var i;if("string"==typeof n){if(this.reconstructor)throw new Error("got plaintext data when reconstructing a packet");var r=(i=this.decodeString(n)).type===Bt.BINARY_EVENT;r||i.type===Bt.BINARY_ACK?(i.type=r?Bt.EVENT:Bt.ACK,this.reconstructor=new Tt(i),0===i.attachments&&t.prototype.emitReserved.call(this,"decoded",i)):t.prototype.emitReserved.call(this,"decoded",i)}else{if(!mt(n)&&!n.base64)throw new Error("Unknown type: "+n);if(!this.reconstructor)throw new Error("got binary data when not reconstructing a packet");(i=this.reconstructor.takeBinaryData(n))&&(this.reconstructor=null,t.prototype.emitReserved.call(this,"decoded",i))}},i.decodeString=function(t){var i=0,r={type:Number(t.charAt(0))};if(void 0===Bt[r.type])throw new Error("unknown packet type "+r.type);if(r.type===Bt.BINARY_EVENT||r.type===Bt.BINARY_ACK){for(var e=i+1;"-"!==t.charAt(++i)&&i!=t.length;);var o=t.substring(e,i);if(o!=Number(o)||"-"!==t.charAt(i))throw new Error("Illegal attachments");r.attachments=Number(o)}if("/"===t.charAt(i+1)){for(var s=i+1;++i;){if(","===t.charAt(i))break;if(i===t.length)break}r.nsp=t.substring(s,i)}else r.nsp="/";var u=t.charAt(i+1);if(""!==u&&Number(u)==u){for(var h=i+1;++i;){var f=t.charAt(i);if(null==f||Number(f)!=f){--i;break}if(i===t.length)break}r.id=Number(t.substring(h,i+1))}if(t.charAt(++i)){var c=this.tryParse(t.substr(i));if(!n.isPayloadValid(r.type,c))throw new Error("invalid payload");r.data=c}return r},i.tryParse=function(t){try{return JSON.parse(t,this.reviver)}catch(t){return!1}},n.isPayloadValid=function(t,n){switch(t){case Bt.CONNECT:return Mt(n);case Bt.DISCONNECT:return void 0===n;case Bt.CONNECT_ERROR:return"string"==typeof n||Mt(n);case Bt.EVENT:case Bt.BINARY_EVENT:return Array.isArray(n)&&("number"==typeof n[0]||"string"==typeof n[0]&&-1===St.indexOf(n[0]));case Bt.ACK:case Bt.BINARY_ACK:return Array.isArray(n)}},i.destroy=function(){this.reconstructor&&(this.reconstructor.finishedReconstruction(),this.reconstructor=null)},n}(I),Tt=function(){function t(t){this.packet=t,this.buffers=[],this.reconPack=t}var n=t.prototype;return n.takeBinaryData=function(t){if(this.buffers.push(t),this.buffers.length===this.reconPack.attachments){var n=Et(this.reconPack,this.buffers);return this.finishedReconstruction(),n}return null},n.finishedReconstruction=function(){this.reconPack=null,this.buffers=[]},t}();var Ut=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};function Mt(t){return"[object Object]"===Object.prototype.toString.call(t)}var xt=Object.freeze({__proto__:null,protocol:5,get PacketType(){return Bt},Encoder:Nt,Decoder:Ct,isPacketValid:function(t){return"string"==typeof t.nsp&&(void 0===(n=t.id)||Ut(n))&&function(t,n){switch(t){case Bt.CONNECT:return void 0===n||Mt(n);case Bt.DISCONNECT:return void 0===n;case Bt.EVENT:return Array.isArray(n)&&("number"==typeof n[0]||"string"==typeof n[0]&&-1===St.indexOf(n[0]));case Bt.ACK:return Array.isArray(n);case Bt.CONNECT_ERROR:return"string"==typeof n||Mt(n);default:return!1}}(t.type,t.data);var n}});function It(t,n,i){return t.on(n,i),function(){t.off(n,i)}}var Rt=Object.freeze({connect:1,connect_error:1,disconnect:1,disconnecting:1,newListener:1,removeListener:1}),Lt=function(t){function n(n,i,r){var o;return(o=t.call(this)||this).connected=!1,o.recovered=!1,o.receiveBuffer=[],o.sendBuffer=[],o.it=[],o.rt=0,o.ids=0,o.acks={},o.flags={},o.io=n,o.nsp=i,r&&r.auth&&(o.auth=r.auth),o.l=e({},r),o.io.et&&o.open(),o}s(n,t);var o=n.prototype;return o.subEvents=function(){if(!this.subs){var t=this.io;this.subs=[It(t,"open",this.onopen.bind(this)),It(t,"packet",this.onpacket.bind(this)),It(t,"error",this.onerror.bind(this)),It(t,"close",this.onclose.bind(this))]}},o.connect=function(){return this.connected||(this.subEvents(),this.io.ot||this.io.open(),"open"===this.io.st&&this.onopen()),this},o.open=function(){return this.connect()},o.send=function(){for(var t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];return n.unshift("message"),this.emit.apply(this,n),this},o.emit=function(t){var n,i,r;if(Rt.hasOwnProperty(t))throw new Error('"'+t.toString()+'" is a reserved event name');for(var e=arguments.length,o=new Array(e>1?e-1:0),s=1;s<e;s++)o[s-1]=arguments[s];if(o.unshift(t),this.l.retries&&!this.flags.fromQueue&&!this.flags.volatile)return this.ut(o),this;var u={type:Bt.EVENT,data:o,options:{}};if(u.options.compress=!1!==this.flags.compress,"function"==typeof o[o.length-1]){var h=this.ids++,f=o.pop();this.ht(h,f),u.id=h}var c=null===(i=null===(n=this.io.engine)||void 0===n?void 0:n.transport)||void 0===i?void 0:i.writable,a=this.connected&&!(null===(r=this.io.engine)||void 0===r?void 0:r.W());return this.flags.volatile&&!c||(a?(this.notifyOutgoingListeners(u),this.packet(u)):this.sendBuffer.push(u)),this.flags={},this},o.ht=function(t,n){var i,r=this,e=null!==(i=this.flags.timeout)&&void 0!==i?i:this.l.ackTimeout;if(void 0!==e){var o=this.io.setTimeoutFn((function(){delete r.acks[t];for(var i=0;i<r.sendBuffer.length;i++)r.sendBuffer[i].id===t&&r.sendBuffer.splice(i,1);n.call(r,new Error("operation has timed out"))}),e),s=function(){r.io.clearTimeoutFn(o);for(var t=arguments.length,i=new Array(t),e=0;e<t;e++)i[e]=arguments[e];n.apply(r,i)};s.withError=!0,this.acks[t]=s}else this.acks[t]=n},o.emitWithAck=function(t){for(var n=this,i=arguments.length,r=new Array(i>1?i-1:0),e=1;e<i;e++)r[e-1]=arguments[e];return new Promise((function(i,e){var o=function(t,n){return t?e(t):i(n)};o.withError=!0,r.push(o),n.emit.apply(n,[t].concat(r))}))},o.ut=function(t){var n,i=this;"function"==typeof t[t.length-1]&&(n=t.pop());var r={id:this.rt++,tryCount:0,pending:!1,args:t,flags:e({fromQueue:!0},this.flags)};t.push((function(t){if(r===i.it[0]){if(null!==t)r.tryCount>i.l.retries&&(i.it.shift(),n&&n(t));else if(i.it.shift(),n){for(var e=arguments.length,o=new Array(e>1?e-1:0),s=1;s<e;s++)o[s-1]=arguments[s];n.apply(void 0,[null].concat(o))}return r.pending=!1,i.ft()}})),this.it.push(r),this.ft()},o.ft=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(this.connected&&0!==this.it.length){var n=this.it[0];n.pending&&!t||(n.pending=!0,n.tryCount++,this.flags=n.flags,this.emit.apply(this,n.args))}},o.packet=function(t){t.nsp=this.nsp,this.io.ct(t)},o.onopen=function(){var t=this;"function"==typeof this.auth?this.auth((function(n){t.vt(n)})):this.vt(this.auth)},o.vt=function(t){this.packet({type:Bt.CONNECT,data:this.lt?e({pid:this.lt,offset:this.dt},t):t})},o.onerror=function(t){this.connected||this.emitReserved("connect_error",t)},o.onclose=function(t,n){this.connected=!1,delete this.id,this.emitReserved("disconnect",t,n),this.yt()},o.yt=function(){var t=this;Object.keys(this.acks).forEach((function(n){if(!t.sendBuffer.some((function(t){return String(t.id)===n}))){var i=t.acks[n];delete t.acks[n],i.withError&&i.call(t,new Error("socket has been disconnected"))}}))},o.onpacket=function(t){if(t.nsp===this.nsp)switch(t.type){case Bt.CONNECT:t.data&&t.data.sid?this.onconnect(t.data.sid,t.data.pid):this.emitReserved("connect_error",new Error("It seems you are trying to reach a Socket.IO server in v2.x with a v3.x client, but they are not compatible (more information here: https://socket.io/docs/v3/migrating-from-2-x-to-3-0/)"));break;case Bt.EVENT:case Bt.BINARY_EVENT:this.onevent(t);break;case Bt.ACK:case Bt.BINARY_ACK:this.onack(t);break;case Bt.DISCONNECT:this.ondisconnect();break;case Bt.CONNECT_ERROR:this.destroy();var n=new Error(t.data.message);n.data=t.data.data,this.emitReserved("connect_error",n)}},o.onevent=function(t){var n=t.data||[];null!=t.id&&n.push(this.ack(t.id)),this.connected?this.emitEvent(n):this.receiveBuffer.push(Object.freeze(n))},o.emitEvent=function(n){if(this.bt&&this.bt.length){var i,e=r(this.bt.slice());try{for(e.s();!(i=e.n()).done;){i.value.apply(this,n)}}catch(t){e.e(t)}finally{e.f()}}t.prototype.emit.apply(this,n),this.lt&&n.length&&"string"==typeof n[n.length-1]&&(this.dt=n[n.length-1])},o.ack=function(t){var n=this,i=!1;return function(){if(!i){i=!0;for(var r=arguments.length,e=new Array(r),o=0;o<r;o++)e[o]=arguments[o];n.packet({type:Bt.ACK,id:t,data:e})}}},o.onack=function(t){var n=this.acks[t.id];"function"==typeof n&&(delete this.acks[t.id],n.withError&&t.data.unshift(null),n.apply(this,t.data))},o.onconnect=function(t,n){this.id=t,this.recovered=n&&this.lt===n,this.lt=n,this.connected=!0,this.emitBuffered(),this.emitReserved("connect"),this.ft(!0)},o.emitBuffered=function(){var t=this;this.receiveBuffer.forEach((function(n){return t.emitEvent(n)})),this.receiveBuffer=[],this.sendBuffer.forEach((function(n){t.notifyOutgoingListeners(n),t.packet(n)})),this.sendBuffer=[]},o.ondisconnect=function(){this.destroy(),this.onclose("io server disconnect")},o.destroy=function(){this.subs&&(this.subs.forEach((function(t){return t()})),this.subs=void 0),this.io.wt(this)},o.disconnect=function(){return this.connected&&this.packet({type:Bt.DISCONNECT}),this.destroy(),this.connected&&this.onclose("io client disconnect"),this},o.close=function(){return this.disconnect()},o.compress=function(t){return this.flags.compress=t,this},o.timeout=function(t){return this.flags.timeout=t,this},o.onAny=function(t){return this.bt=this.bt||[],this.bt.push(t),this},o.prependAny=function(t){return this.bt=this.bt||[],this.bt.unshift(t),this},o.offAny=function(t){if(!this.bt)return this;if(t){for(var n=this.bt,i=0;i<n.length;i++)if(t===n[i])return n.splice(i,1),this}else this.bt=[];return this},o.listenersAny=function(){return this.bt||[]},o.onAnyOutgoing=function(t){return this.gt=this.gt||[],this.gt.push(t),this},o.prependAnyOutgoing=function(t){return this.gt=this.gt||[],this.gt.unshift(t),this},o.offAnyOutgoing=function(t){if(!this.gt)return this;if(t){for(var n=this.gt,i=0;i<n.length;i++)if(t===n[i])return n.splice(i,1),this}else this.gt=[];return this},o.listenersAnyOutgoing=function(){return this.gt||[]},o.notifyOutgoingListeners=function(t){if(this.gt&&this.gt.length){var n,i=r(this.gt.slice());try{for(i.s();!(n=i.n()).done;){n.value.apply(this,t.data)}}catch(t){i.e(t)}finally{i.f()}}},i(n,[{key:"disconnected",get:function(){return!this.connected}},{key:"active",get:function(){return!!this.subs}},{key:"volatile",get:function(){return this.flags.volatile=!0,this}}])}(I);function _t(t){t=t||{},this.ms=t.min||100,this.max=t.max||1e4,this.factor=t.factor||2,this.jitter=t.jitter>0&&t.jitter<=1?t.jitter:0,this.attempts=0}_t.prototype.duration=function(){var t=this.ms*Math.pow(this.factor,this.attempts++);if(this.jitter){var n=Math.random(),i=Math.floor(n*this.jitter*t);t=1&Math.floor(10*n)?t+i:t-i}return 0|Math.min(t,this.max)},_t.prototype.reset=function(){this.attempts=0},_t.prototype.setMin=function(t){this.ms=t},_t.prototype.setMax=function(t){this.max=t},_t.prototype.setJitter=function(t){this.jitter=t};var Dt=function(t){function n(n,i){var r,e;(r=t.call(this)||this).nsps={},r.subs=[],n&&"object"===c(n)&&(i=n,n=void 0),(i=i||{}).path=i.path||"/socket.io",r.opts=i,$(r,i),r.reconnection(!1!==i.reconnection),r.reconnectionAttempts(i.reconnectionAttempts||1/0),r.reconnectionDelay(i.reconnectionDelay||1e3),r.reconnectionDelayMax(i.reconnectionDelayMax||5e3),r.randomizationFactor(null!==(e=i.randomizationFactor)&&void 0!==e?e:.5),r.backoff=new _t({min:r.reconnectionDelay(),max:r.reconnectionDelayMax(),jitter:r.randomizationFactor()}),r.timeout(null==i.timeout?2e4:i.timeout),r.st="closed",r.uri=n;var o=i.parser||xt;return r.encoder=new o.Encoder,r.decoder=new o.Decoder,r.et=!1!==i.autoConnect,r.et&&r.open(),r}s(n,t);var i=n.prototype;return i.reconnection=function(t){return arguments.length?(this.kt=!!t,t||(this.skipReconnect=!0),this):this.kt},i.reconnectionAttempts=function(t){return void 0===t?this.At:(this.At=t,this)},i.reconnectionDelay=function(t){var n;return void 0===t?this.jt:(this.jt=t,null===(n=this.backoff)||void 0===n||n.setMin(t),this)},i.randomizationFactor=function(t){var n;return void 0===t?this.Et:(this.Et=t,null===(n=this.backoff)||void 0===n||n.setJitter(t),this)},i.reconnectionDelayMax=function(t){var n;return void 0===t?this.Ot:(this.Ot=t,null===(n=this.backoff)||void 0===n||n.setMax(t),this)},i.timeout=function(t){return arguments.length?(this.Bt=t,this):this.Bt},i.maybeReconnectOnOpen=function(){!this.ot&&this.kt&&0===this.backoff.attempts&&this.reconnect()},i.open=function(t){var n=this;if(~this.st.indexOf("open"))return this;this.engine=new pt(this.uri,this.opts);var i=this.engine,r=this;this.st="opening",this.skipReconnect=!1;var e=It(i,"open",(function(){r.onopen(),t&&t()})),o=function(i){n.cleanup(),n.st="closed",n.emitReserved("error",i),t?t(i):n.maybeReconnectOnOpen()},s=It(i,"error",o);if(!1!==this.Bt){var u=this.Bt,h=this.setTimeoutFn((function(){e(),o(new Error("timeout")),i.close()}),u);this.opts.autoUnref&&h.unref(),this.subs.push((function(){n.clearTimeoutFn(h)}))}return this.subs.push(e),this.subs.push(s),this},i.connect=function(t){return this.open(t)},i.onopen=function(){this.cleanup(),this.st="open",this.emitReserved("open");var t=this.engine;this.subs.push(It(t,"ping",this.onping.bind(this)),It(t,"data",this.ondata.bind(this)),It(t,"error",this.onerror.bind(this)),It(t,"close",this.onclose.bind(this)),It(this.decoder,"decoded",this.ondecoded.bind(this)))},i.onping=function(){this.emitReserved("ping")},i.ondata=function(t){try{this.decoder.add(t)}catch(t){this.onclose("parse error",t)}},i.ondecoded=function(t){var n=this;R((function(){n.emitReserved("packet",t)}),this.setTimeoutFn)},i.onerror=function(t){this.emitReserved("error",t)},i.socket=function(t,n){var i=this.nsps[t];return i?this.et&&!i.active&&i.connect():(i=new Lt(this,t,n),this.nsps[t]=i),i},i.wt=function(t){for(var n=0,i=Object.keys(this.nsps);n<i.length;n++){var r=i[n];if(this.nsps[r].active)return}this.St()},i.ct=function(t){for(var n=this.encoder.encode(t),i=0;i<n.length;i++)this.engine.write(n[i],t.options)},i.cleanup=function(){this.subs.forEach((function(t){return t()})),this.subs.length=0,this.decoder.destroy()},i.St=function(){this.skipReconnect=!0,this.ot=!1,this.onclose("forced close")},i.disconnect=function(){return this.St()},i.onclose=function(t,n){var i;this.cleanup(),null===(i=this.engine)||void 0===i||i.close(),this.backoff.reset(),this.st="closed",this.emitReserved("close",t,n),this.kt&&!this.skipReconnect&&this.reconnect()},i.reconnect=function(){var t=this;if(this.ot||this.skipReconnect)return this;var n=this;if(this.backoff.attempts>=this.At)this.backoff.reset(),this.emitReserved("reconnect_failed"),this.ot=!1;else{var i=this.backoff.duration();this.ot=!0;var r=this.setTimeoutFn((function(){n.skipReconnect||(t.emitReserved("reconnect_attempt",n.backoff.attempts),n.skipReconnect||n.open((function(i){i?(n.ot=!1,n.reconnect(),t.emitReserved("reconnect_error",i)):n.onreconnect()})))}),i);this.opts.autoUnref&&r.unref(),this.subs.push((function(){t.clearTimeoutFn(r)}))}},i.onreconnect=function(){var t=this.backoff.attempts;this.ot=!1,this.backoff.reset(),this.emitReserved("reconnect",t)},n}(I),Pt={};function $t(t,n){"object"===c(t)&&(n=t,t=void 0);var i,r=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2?arguments[2]:void 0,r=t;i=i||"undefined"!=typeof location&&location,null==t&&(t=i.protocol+"//"+i.host),"string"==typeof t&&("/"===t.charAt(0)&&(t="/"===t.charAt(1)?i.protocol+t:i.host+t),/^(https?|wss?):\/\//.test(t)||(t=void 0!==i?i.protocol+"//"+t:"https://"+t),r=ft(t)),r.port||(/^(http|ws)$/.test(r.protocol)?r.port="80":/^(http|ws)s$/.test(r.protocol)&&(r.port="443")),r.path=r.path||"/";var e=-1!==r.host.indexOf(":")?"["+r.host+"]":r.host;return r.id=r.protocol+"://"+e+":"+r.port+n,r.href=r.protocol+"://"+e+(i&&i.port===r.port?"":":"+r.port),r}(t,(n=n||{}).path||"/socket.io"),e=r.source,o=r.id,s=r.path,u=Pt[o]&&s in Pt[o].nsps;return n.forceNew||n["force new connection"]||!1===n.multiplex||u?i=new Dt(e,n):(Pt[o]||(Pt[o]=new Dt(e,n)),i=Pt[o]),r.query&&!n.query&&(n.query=r.queryKey),i.socket(r.path,n)}return e($t,{Manager:Dt,Socket:Lt,io:$t,connect:$t}),$t}));
\ No newline at end of file
diff --git a/examples/bedtime-story-teller/assets/style.css b/examples/bedtime-story-teller/assets/style.css
new file mode 100644
index 0000000..26bf5da
--- /dev/null
+++ b/examples/bedtime-story-teller/assets/style.css
@@ -0,0 +1,795 @@
+/*
+ * SPDX-FileCopyrightText: Copyright (C) ARDUINO SRL (http://www.arduino.cc)
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@import url("fonts/fonts.css");
+
+/*
+ * This CSS is used to center the various elements on the screen
+ */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    color: #333;
+}
+
+.content-wrapper {
+    width: 100%;
+    max-width: 1320px;
+    margin: 0 auto;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.play-area {
+    width: 100%;
+    min-height: 100vh;
+    background-image: url('./img/storyteller-background.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    display: flex;
+    justify-content: center;
+}
+
+.main-content {
+    display: grid;
+    grid-template-columns: minmax(auto, 455px) 24px 1fr;
+    grid-template-rows: auto 1fr;
+    align-items: start;
+    width: 100%;
+    max-width: 1280px;
+}
+
+.column-title {
+    font-family: "Open Sans";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 160%;
+    letter-spacing: 0.16px;
+    color: white;
+    margin-bottom: 16px;
+}
+
+.modal-body-title {
+    font-family: "Open Sans";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 160%;
+    letter-spacing: 0.16px;
+    color: white;
+    margin-bottom: 16px;
+}
+
+.main-content > .column-title:nth-child(1) {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+}
+
+.your-story-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    grid-column: 3 / 4;
+    grid-row: 1 / 2;
+}
+
+.your-story-header .column-title {
+    margin-bottom: 0;
+}
+
+.main-content > .container {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+}
+
+.story-output-container {
+    grid-column: 3 / 4;
+    grid-row: 2 / 3;
+    background-color: transparent;
+    border-radius: 8px;
+    padding: 24px;
+    box-sizing: border-box;
+    border: 2px solid #C9D2D2;
+    height: 100%;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+}
+
+.container {
+    width: 100%;
+    max-width: 550px;
+    min-width: 300px;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.arduino-text {
+    color: #25C2C7;
+    font-family: "Roboto Mono", monospace;
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+    font-style: normal;
+    line-height: 170%;
+    letter-spacing: 0.28px;
+}
+
+.arduino-logo {
+    height: 48px;
+    width: auto;
+}
+
+/*
+ * Components styling
+ */
+
+.parameter-container.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: default;
+}
+
+.parameter-container {
+    border-radius: 8px;
+    background-color: #ECF1F1;
+    margin-bottom: 8px;
+    padding: 16px;
+    cursor: pointer;
+}
+
+.parameter-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+}
+
+.parameter-header .arrow-icon {
+    margin-left: auto;
+    margin-right: 4px;
+}
+
+.parameter-title {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 160%;
+    letter-spacing: 0.14px;
+    color: #2C353A;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 0;
+    font-family: "Open Sans";
+}
+
+.arrow-icon {
+    transition: transform 0.3s ease;
+}
+
+.arrow-icon.rotated {
+    transform: rotate(90deg);
+}
+
+.parameter-content {
+    margin-top: 16px;
+    display: none;
+}
+
+.chips-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.chip {
+    border-radius: 200px;
+    border: 1px solid #C9D2D2;
+    background: #FFF;
+    color: #2C353A;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 160%;
+    letter-spacing: 0.12px;
+    padding: 4px 12px;
+    white-space: nowrap;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+}
+
+.chip img {
+    margin-right: 8px;
+}
+
+.chip.selected {
+    background: #008184;
+    color: #FFF;
+    border-color: #008184;
+}
+
+
+.selection-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border: 1px solid #C9D2D2;
+    border-radius: 4px;
+    margin: 0px 4px 4px 0px;
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.selection-pill img {
+    margin-right: 4px;
+    height: 14px;
+    width: 14px;
+}
+
+.selected-value,
+.plus-x {
+    display: none;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid #C9D2D2;
+    background: #ECF1F1;
+    padding: 2px 8px;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-weight: 600;
+    color: #2C353A;
+    margin-left: 8px;
+}
+
+.selected-value img {
+    margin-right: 4px;
+}
+
+.selected-value img {
+    margin-right: 4px;
+}
+
+.optional-text {
+    color: #5D6A6B;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%;
+    letter-spacing: 0.12px;
+    align-items: center;
+    gap: 4px;
+}
+
+.story-type-selections {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    display: inline-block;
+    vertical-align: middle;
+    flex: 1;
+}
+
+.paragraph-title {
+    color: #2C353A;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 160%;
+    letter-spacing: 0.12px;
+    margin: 0 0 8px 0;
+}
+
+.other-textarea {
+    width: 100%;
+    min-height: 100px;
+    border-radius: 4px;
+    border: 1px solid #C9D2D2;
+    background: #FFF;
+    padding: 8px;
+    font-family: "Open Sans";
+    font-size: 12px;
+    resize: vertical;
+    box-sizing: border-box;
+}
+
+.char-counter {
+    text-align: right;
+    color: #5D6A6B;
+    font-family: "Open Sans";
+    font-size: 10px;
+    margin-top: 4px;
+}
+
+.generate-story-button {
+    border-radius: 8px;
+    background: #25C2C7;
+    color: #171E21;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 160%;
+    letter-spacing: 0.12px;
+    padding: 8px 16px;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 16px;
+    margin-left: auto;
+    width: fit-content;
+}
+
+.generate-story-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.story-output-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: white;
+    font-family: "Open Sans";
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.story-output-placeholder p {
+    margin: 2px;
+}
+
+.generate-randomly-button {
+    border-radius: 8px;
+    background: #25C2C7;
+    color: #171E21;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 160%;
+    letter-spacing: 0.12px;
+    padding: 8px 16px;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.character-input-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 0;
+    gap: 8px;
+}
+
+.character-input-group:not(:last-child) {
+    border-bottom: 1px solid #C9D2D2;
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+}
+
+.character-inputs {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.delete-character-button {
+    background-color: #F6D9D5;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 5px 2px 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.delete-character-button img {
+    width: 16px;
+    height: 16px;
+}
+
+.character-first-row {
+    display: flex;
+    gap: 8px;
+}
+
+.character-second-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.input-icon {
+    margin-right: 8px;
+}
+
+.character-name,
+.character-role,
+.character-description {
+    width: 100%;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #C9D2D2;
+    background: #FFF;
+    font-family: "Open Sans";
+    font-size: 12px;
+}
+
+.character-second-row .character-description {
+    flex-grow: 1;
+}
+
+.add-character-container {
+    text-align: center;
+    margin-top: 16px;
+}
+
+.add-character-button {
+    background-color: transparent;
+    border: none;
+    color: #008184;
+    padding: 8px 16px;
+    border-radius: 200px;
+    cursor: pointer;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-weight: 600;
+}
+
+#story-response-area {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#loading-spinner {
+    margin: 20px auto;
+}
+
+#story-response-area {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.response-container {
+    background-color: #ECF1F1;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+}
+
+.response-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.icon-button {
+    background-color: transparent;
+    color: #008184;
+    padding: 8px 16px;
+    border-radius: 200px;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.response-header-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.modal {
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background-color: #fefefe;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    border-radius: 8px;
+    color: #2C353A;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+
+.modal-header h2 {
+    margin: 0;
+    font-size: 18px;
+}
+
+.close-button {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-body {
+    text-align: center;
+}
+
+.modal-body p {
+    color: #2C353A;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+}
+
+.modal-body-small {
+    font-size: 14px !important;
+    font-style: normal !important;
+    font-weight: 400 !important;
+    text-align: center !important;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 10px;
+}
+
+#clear-story-button,
+#confirm-new-story-button {
+    border-radius: 8px;
+    background: #25C2C7;
+    color: #171E21;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 160%;
+    letter-spacing: 0.12px;
+    padding: 8px 16px;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.icon-button img {
+    height: 14px;
+    width: 14px;
+}
+
+.response-title {
+    color: #2C353A;
+    font-family: "Open Sans";
+    font-size: 16px;
+    font-weight: 700;
+    margin: 0;
+    flex-shrink: 0;
+}
+
+.response-content {
+    color: #2C353A;
+    font-family: "Open Sans";
+    font-size: 14px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-y: auto;
+    max-height: 60vh; /* Added for fixed height and scrollbar */
+}
+
+#prompt-display strong {
+    color: #008184;
+    font-weight: bold;
+}
+
+.response-content strong {
+    color: #25C2C7;
+}
+
+.story-type-paragraph {
+    margin-bottom: 8px;
+}
+
+.response-title {
+    margin-bottom: 8px;
+}
+
+#story-container .response-title,
+#story-container .response-content {
+    color: #2C353A;
+}
+
+.spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    animation: spin 1s linear infinite;
+    margin-left: 10px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.button-spinner.spinner {
+    width: 20px;
+    height: 20px;
+    border-width: 2px;
+    margin: 0;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+
+
+/*
+ * Responsive design
+ */
+
+@media (max-width: 1024px) {
+    .main-content {
+        grid-template-columns: 1fr;
+        gap: 24px;
+    }
+
+    .main-content > .column-title:nth-child(1) {
+        grid-row: 1;
+    }
+
+    .main-content > .container {
+        grid-row: 2;
+        grid-column: 1;
+        max-width: none;
+        width: 100%;
+        padding: 0;
+    }
+
+    .your-story-header {
+        grid-row: 3;
+        grid-column: 1;
+    }
+
+
+
+    .story-output-container {
+        grid-row: 4;
+        grid-column: 1;
+        padding: 0;
+        border: none;
+    }
+
+    .main-content > div:nth-child(2) {
+        display: none;
+    }
+}
+
+/*
+ * Responsive design
+ */
+
+@media (max-width: 768px) {
+    .container {
+        max-width: none;
+        width: 100%;
+        padding: 20px;
+        min-height: 400px;
+    }
+
+    .arduino-text {
+        font-size: 24px;
+    }
+
+    .main-content {
+        gap: 20px;
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+        padding: 8px 12px;
+    }
+
+    .container {
+        padding: 16px;
+    }
+
+    .arduino-logo {
+        height: 20px;
+        width: auto;
+    }
+
+    #rescanButton {
+        font-size: 12px;
+    }
+}
+
+/* Story Response Styling */
+#story-response {
+    white-space: normal;
+}
+
+#story-response h1,
+#story-response h2 {
+    margin-top: 0;
+    margin-bottom: 0.8em;
+}
+
+#story-response p {
+    margin: 0 0 8px 0;
+}
+
+#story-response::-webkit-scrollbar {
+    width: 8px;
+}
+
+#story-response::-webkit-scrollbar-track {
+    background-color: transparent;
+}
diff --git a/examples/bedtime-story-teller/python/main.py b/examples/bedtime-story-teller/python/main.py
new file mode 100644
index 0000000..4dfd7ae
--- /dev/null
+++ b/examples/bedtime-story-teller/python/main.py
@@ -0,0 +1,62 @@
+# SPDX-FileCopyrightText: Copyright (C) ARDUINO SRL (http://www.arduino.cc)
+#
+# SPDX-License-Identifier: MPL-2.0
+
+import re
+from arduino.app_bricks.cloud_llm import CloudLLM, CloudModel
+from arduino.app_bricks.web_ui import WebUI
+from arduino.app_utils import App
+
+
+llm = CloudLLM(
+    model=CloudModel.GOOGLE_GEMINI,
+    system_prompt="You are a bedtime story teller. Your response must be the story itself, formatted directly in HTML. Do not wrap your response in markdown code blocks or any other formatting. Use heading tags like <h1>, <h2> for titles and subtitles. Use <strong> or <b> for bold text. Include relevant emojis. If the story is chapter-based, use heading tags for chapter titles.",
+)
+llm.with_memory()
+
+ui = WebUI()
+
+
+def generate_story(_, data):
+    age = data.get('age', 'any')
+    theme = data.get('theme', 'any')
+    tone = data.get('tone', 'any')
+    ending_type = data.get('endingType', 'any')
+    narrative_structure = data.get('narrativeStructure', 'any')
+    duration = data.get('duration', 'any')
+    characters = data.get('characters', [])
+    other = data.get('other', '')
+
+    # Create a prompt with HTML for display
+    prompt_for_display = f"As a parent who loves to read bedtime stories to my <strong>{age}</strong> year old child, I need a delightful and age-appropriate story."
+
+    if characters:
+        prompt_for_display += " Characters of the story: "
+        char_prompts = []
+        for i, char in enumerate(characters):
+            ch = f"Character {i+1} (<strong>{char.get('name')}</strong>, <strong>{char.get('role')}</strong>"
+            ch += f", <strong>{char.get('description')}</strong>)" if char.get('description') else ")"
+            char_prompts.append(ch)
+        prompt_for_display += ", ".join(char_prompts)
+        prompt_for_display += "."
+
+    prompt_for_display += f" The story type is <strong>{theme}</strong>. The tone should be <strong>{tone}</strong>. The format should be a narrative-style story with a clear beginning, middle, and end, allowing for a smooth and engaging reading experience. The objective is to entertain and soothe the child before bedtime. Provide a brief introduction to set the scene and introduce the main character. The scope should revolve around the topic: managing emotions and conflicts. The length should be approximately <strong>{duration}</strong>. Please ensure the story has a <strong>{narrative_structure}</strong> narrative structure, leaving the child with a sense of <strong>{ending_type}</strong>. The language should be easy to understand and suitable for my child's age comprehension."
+    if other:
+        prompt_for_display += f"\n\nOther on optional stuff for the story: <strong>{other}</strong>"
+
+    # Create a plain text prompt for the LLM by stripping HTML tags
+    prompt_for_llm = re.sub('<[^>]*>', '', prompt_for_display)
+
+    # Send the display prompt to the UI
+    ui.send_message("prompt", prompt_for_display)
+
+    # Use the plain text prompt for the LLM and stream the response
+    for resp in llm.chat_stream(prompt_for_llm):
+        ui.send_message("response", resp)
+
+    # Signal the end of the stream
+    ui.send_message("stream_end", {})
+
+ui.on_message("generate_story", generate_story)
+
+App.run()