{"_id":"sv-typewriter","_rev":"11-1cc96a04a863d6525dafb2f8473946d7","name":"sv-typewriter","dist-tags":{"latest":"4.1.2"},"versions":{"4.0.3":{"name":"sv-typewriter","version":"4.0.3","keywords":["svelte","typewriter-effect"],"author":{"name":"Nassim Tabchiche","email":"n.tabchiche2@gmail.com"},"license":"MIT","_id":"sv-typewriter@4.0.3","maintainers":[{"name":"nas-tabchiche","email":"n.tabchiche2@gmail.com"}],"homepage":"https://github.com/nas-tabchiche/svelte-typewriter","bugs":{"url":"https://github.com/nas-tabchiche/svelte-typewriter","email":"n.tabchiche2@gmail.com"},"dist":{"shasum":"6c5fc5140bf4243d99ca952cea2a5c00e750898c","tarball":"https://registry.npmjs.org/sv-typewriter/-/sv-typewriter-4.0.3.tgz","fileCount":3,"integrity":"sha512-ZtWdAaU82ps9NI5S6nCpe5QRdL6yho8SN5xyHJ9/kYxaGCB7GsiXPb4MJ9exCeeR2rdARsNqgQsUDPbBtbf8RA==","signatures":[{"sig":"MEQCIDW8RalUesHZrcCch9xJy7bGH4FFNuGdV+Uu6AeTcrenAiBXDlkqGQzx5/H4f8tD8Hd3dg2wLmAnuRyJ09j/1cCxyQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12015},"main":"./package/index.js","type":"module","svelte":"./package/Typewriter.svelte","exports":{".":{"types":"./package/index.d.ts","import":"./package/index.js","svelte":"./package/Typewriter.svelte"}},"gitHead":"a3e725fa4466013c7953086696231737fce828c7","scripts":{"dev":"vite dev","build":"vite build","prepare":"husky install","preview":"vite preview","release":"docker run --rm -t -v $PWD:/repo henriquehbr/tagit:0.7.0-node ./bump-package-json","prettier":"prettier --write \"./src/**/*.js\"","prepublish":"svelte-package -o package","deploy-demo":"./deploy-demo"},"_npmUser":{"name":"nas-tabchiche","email":"n.tabchiche2@gmail.com"},"repository":{"url":"git+https://github.com/nas-tabchiche/svelte-typewriter.git","type":"git"},"_npmVersion":"10.9.2","description":"A simple and reusable typewriter effect for your Svelte applications","directories":{},"_nodeVersion":"23.9.0","dependencies":{"@formatjs/intl-segmenter":"^11.5.3"},"typesVersions":{">4.0":{"sv-typewriter":["./package/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.4","husky":"^8.0.3","svelte":"^5.0.0","prettier":"^3.1.0","svelte2tsx":"^0.6.23","typescript":"^5.5.0","svelte-check":"^4.0.0","@sveltejs/kit":"^2.5.27","@sveltejs/package":"^2.3.7","prettier-plugin-svelte":"^3.2.6","@sveltejs/adapter-static":"^3.0.0","@sveltejs/vite-plugin-svelte":"^4.0.0"},"peerDependencies":{"svelte":">=3.47.x"},"_npmOperationalInternal":{"tmp":"tmp/sv-typewriter_4.0.3_1749470439326_0.8356348011353256","host":"s3://npm-registry-packages-npm-production"}},"4.1.1":{"name":"sv-typewriter","version":"4.1.1","keywords":["svelte"],"_id":"sv-typewriter@4.1.1","maintainers":[{"name":"nas-tabchiche","email":"n.tabchiche2@gmail.com"}],"dist":{"shasum":"70a3e08ea8358588c6b2dd4707ef79e0eeae8e09","tarball":"https://registry.npmjs.org/sv-typewriter/-/sv-typewriter-4.1.1.tgz","fileCount":57,"integrity":"sha512-l2ejntOzMczzwqaddU6HWjJ0OxPGfF5H2JoXol4Oh388Kunknt36JvCxX3+37qoDPWHN6QNF+525w3kqOOqToQ==","signatures":[{"sig":"MEUCIQD5artBYBwEuDSVeySLwZnJmEmqfi9kTn+lTJKoSVuOTAIgBzoyG9kRu8DE1K3FvEy1h2W5oNf6IrOw5TI3WDs057M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51400},"pnpm":{"onlyBuiltDependencies":["esbuild"]},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"1b3d42256f45de032d9aa4fed31b63e92afc8f67","scripts":{"dev":"vite dev","lint":"prettier --check . && eslint .","test":"npm run test:unit -- --run && npm run test:e2e","build":"vite build && npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./jsconfig.json","format":"prettier --write .","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","test:e2e":"playwright test","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"},"_npmUser":{"name":"nas-tabchiche","email":"n.tabchiche2@gmail.com"},"_npmVersion":"10.9.2","description":"> A simple and reusable typewriter effect for your Svelte applications","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.9.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.6","jsdom":"^26.0.0","eslint":"^9.18.0","svelte":"^5.0.0","vitest":"3.1.4","globals":"^16.0.0","publint":"^0.3.2","prettier":"^3.4.2","@eslint/js":"^9.18.0","typescript":"^5.0.0","svelte-check":"^4.0.0","@sveltejs/kit":"^2.16.0","@eslint/compat":"^1.2.5","@playwright/test":"^1.49.1","@sveltejs/package":"^2.0.0","eslint-plugin-svelte":"^3.0.0","@sveltejs/adapter-auto":"^6.0.0","eslint-config-prettier":"^10.0.1","prettier-plugin-svelte":"^3.3.3","@testing-library/svelte":"^5.2.4","@testing-library/jest-dom":"^6.6.3","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/sv-typewriter_4.1.1_1749471846398_0.3026142462290744","host":"s3://npm-registry-packages-npm-production"}},"4.1.2":{"name":"sv-typewriter","version":"4.1.2","scripts":{"dev":"vite dev","build":"vite build && npm run prepack","preview":"vite preview","prepare":"svelte-kit sync || echo ''","prepack":"svelte-kit sync && svelte-package && publint","check":"svelte-kit sync && svelte-check --tsconfig ./jsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch","format":"prettier --write .","lint":"prettier --check . && eslint .","test:unit":"vitest","test":"npm run test:unit -- --run && npm run test:e2e","test:e2e":"playwright test"},"sideEffects":["**/*.css"],"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@eslint/compat":"^1.2.5","@eslint/js":"^9.18.0","@playwright/test":"^1.49.1","@sveltejs/adapter-auto":"^6.0.0","@sveltejs/kit":"^2.16.0","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^5.0.0","@testing-library/jest-dom":"^6.6.3","@testing-library/svelte":"^5.2.4","eslint":"^9.18.0","eslint-config-prettier":"^10.0.1","eslint-plugin-svelte":"^3.0.0","globals":"^16.0.0","jsdom":"^26.0.0","prettier":"^3.4.2","prettier-plugin-svelte":"^3.3.3","publint":"^0.3.2","svelte":"^5.0.0","svelte-check":"^4.0.0","typescript":"^5.0.0","vite":"^6.2.6","vitest":"3.1.4"},"keywords":["svelte"],"pnpm":{"onlyBuiltDependencies":["esbuild"]},"_id":"sv-typewriter@4.1.2","gitHead":"268c73749a23ae1429cd4031593a5471ce02af53","description":"> A simple and reusable typewriter effect for your Svelte applications","_nodeVersion":"23.9.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-x9/igEUCEat1uTlwtPqdW2kSNh7G18LuX0FGhb3GzSya5CFH45h39C3K8jQ6rwCRgtDPgrsPtCKvCvKUI4eZ1w==","shasum":"72899f085cd29eb13e6e1eb3df731640b1d2c587","tarball":"https://registry.npmjs.org/sv-typewriter/-/sv-typewriter-4.1.2.tgz","fileCount":57,"unpackedSize":51536,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDCJ675jS7tjZxlOmrLT/S9KyvTVudcSu5eLWfWtxvNWAIgFq8y0ACKmIKRVwW6tIL7ckdYzXWxoyD8VAZrbsdoq94="}]},"_npmUser":{"name":"nas-tabchiche","email":"n.tabchiche2@gmail.com"},"directories":{},"maintainers":[{"name":"nas-tabchiche","email":"n.tabchiche2@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sv-typewriter_4.1.2_1749507588008_0.5867741864290397"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-08T22:15:11.173Z","modified":"2025-06-09T22:19:48.404Z","4.0.0":"2025-06-08T22:15:11.352Z","4.0.1":"2025-06-08T22:28:15.814Z","4.0.2":"2025-06-09T11:56:05.967Z","4.0.3":"2025-06-09T12:00:39.488Z","4.1.0":"2025-06-09T12:16:44.627Z","4.1.1":"2025-06-09T12:24:06.570Z","4.1.2":"2025-06-09T22:19:48.216Z"},"keywords":["svelte"],"description":"> A simple and reusable typewriter effect for your Svelte applications","maintainers":[{"name":"nas-tabchiche","email":"n.tabchiche2@gmail.com"}],"readme":"# svelte-typewriter\n\n> A simple and reusable typewriter effect for your Svelte applications\n\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![npm Version](https://img.shields.io/npm/v/svelte-typewriter)](https://www.npmjs.com/package/svelte-typewriter)\n[![npm Downloads](https://img.shields.io/npm/dw/svelte-typewriter)](https://www.npmjs.com/package/svelte-typewriter)\n[![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/2074-shield.svg)](https://madewithsvelte.com/p/svelte-typewriter/shield-link)\n\n[DEMO](https://henriquehbr.srht.site/svelte-typewriter)\n\n## Summary\n\n- [Installation](#installation)\n- [Usage](#usage)\n - [Component-based approach](#component-based-approach)\n - [Directive-based approach](#directive-based-approach)\n- [Props](#props)\n - [Settings](#settings)\n - [Modes](#modes)\n - [Event listeners](#event-listeners)\n - [Child attributes](#child-attributes)\n - [CSS variables](#css-variables)\n- [Used by](#used-by)\n- [FAQs](#faqs)\n - [UMD and IIFE output formats are not supported for code-splitting builds](#umd-and-iife-output-formats-are-not-supported-for-code-splitting-builds)\n - [Test suite failed to run: SyntaxError: Unexpected token '<'](#test-suite-failed-to-run-syntaxerror-unexpected-token-)\n- [Contributing](#contributing)\n\n## Installation\n\n```bash\npnpm i -D svelte-typewriter\n```\n\n> `pnpm` is used here just as an example, you can use your package manager of choice\n\n## Usage\n\n### Component-based approach\n\nIn order to use this method, you need to import the Svelte component, and wrap\nyour elements with the `` component\n\n```svelte\n\n\n\n\t

Testing the typewriter effect

\n\n```\n\n### Directive-based approach\n\nThis method relies on [Svelte actions](https://svelte.dev/docs#template-syntax-element-directives-use-action)\n(more specifically, the `use:action` directive), in order to animate your\ncomponents with this approach, you must import the directive of the animation\nmode you want to use and include it as a attribute on your element\n\n```svelte\n\n\n

Testing the typewriter effect

\n```\n\nEach mode has it's own directive, which accepts a single object parameter that\ncan be used to set the animation props (just like on the component-based approach)\n\nThere are just a few limitations of this approach to keep in mind:\n\n- For now, there's no way to have the cursor caret on the text being animated\n- Event listeners (like `on:done`) won't be triggered\n- Depending on the animation mode you're using, some essential animation\n properties must be explicitly specified, because they don't have default values\n when used on a directive, otherwise the animation won't work properly, those\n include `interval`, `wordInterval`, `writeInterval` and `scrambleDuration`\n\n## Props\n\nThe `` component can receive props that allows to manipulate the\nbehavior of the resulting animation, these props are divided into the following\ngroups\n\n- **Settings:** general animation properties\n- **Event listeners:** functions executed based on the condition of a trigger\n- **Child attributes:** child elements animation properties\n- **CSS variables:** styling-related properties\n\n### Settings\n\n| Prop | Type | Description | Default |\n| -------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `mode` | `concurrent`, `cascade`, `loop`, `loopOnce`, `loopRandom` or `scramble` | The animation mode to be used | `concurrent` |\n| `interval` | `number` or `array` | The interval (in milliseconds) between each letter, you can also pass a array of distinct intervals to mimic human typing | `30` |\n| `cursor` | `boolean` | Enables/disables the cursor on the Typewriter animation | `true` |\n| `keepCursorOnFinish` | `number` or `boolean` | Keep the cursor visible (indefinitely, or for a given amount of time, in milliseconds) after the animation has finished | `false` |\n| `delay` | `number` | The interval (in milliseconds) before the animation starts | `0` |\n| `showCursorOnDelay` | `boolean` | (only usable when `delay` is not 0) Shows the cursor during delay period | `false` |\n| `disabled` | `boolean` | Enables/disables the typewriter animation | `false` |\n| `element` | `string` | Sets the tag that will be used for the container element | `div` |\n| `wordInterval` | `number` | **(`loop`, `loopOnce` and `loopRandom` modes only)** Sets the interval (in milliseconds) between each word | `1500` |\n| `unwriteInterval` | `number` | **(`loop`, `loopOnce` and `loopRandom` modes only)** The interval (in milliseconds) between each letter unwrite, if not defined it uses `interval` | `30` |\n| `scrambleDuration` | `number` | **(`scramble` mode only)** Sets the duration (in milliseconds) of the scramble animation | `3000` |\n| `scrambleSlowdown` | `boolean` | **(`scramble` mode only)** Enables/disables the slowdown effect right before the scramble animation ends (only works in scramble mode) | `true` |\n\n#### Modes\n\nYou can control the behavior of the typewriter effect by passing specific props to the `` component, the table below contains information about all modes:\n\n| Mode | Description |\n| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |\n| `concurrent` | Apply animation simultaneously on all elements, as opposed to the sequential animation of `cascade` mode |\n| `cascade` | Apply animation on all elements sequentially instead of simultaneously |\n| `loop` | Cycles the animation between the children elements of the parent `Typewriter` component |\n| `loopOnce` | It's very similar to the `loop` mode, but the animation stops once it reaches the last element |\n| `loopRandom` | It's very similar to `loop` mode, but instead of cycling the animation in a linear way, it picks a random child element to animate each time |\n| `scramble` | Slowly reveals the a word by continuously randomizing all of it's letters for a specific amount of time |\n\n### Event listeners\n\n| Event | Trigger | Detail |\n| --------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |\n| `on:done` | Is executed at the end of the animation, if used with one of the loop modes, this event will be fired after each word gets written and erased | `\"write\" \\| \"unwrite\" \\| null` |\n\n### Child attributes\n\n| Attribute | Description |\n| ------------- | ---------------------------------------------------------------------------------------------------- |\n| `data-static` | Marks an element as static, excluding it from receiving animations from the `` component |\n\n### CSS variables\n\n| Variable | Description |\n| ---------------- | ---------------------------------------------------------------------------------- |\n| `--cursor-color` | Sets the cursor color (accepts any valid color name, hex code and rgb/rgba values) |\n| `--cursor-width` | Sets the cursor width |\n\n## Used by\n\n
\n \n \"SveltePress\n \n \n \"That.us\n \n \n \"Fronvo\n \n \n \"plebeian.market\n \n \n \"pada\n \n
\n\n## FAQs\n\n#### UMD and IIFE output formats are not supported for code-splitting builds.\n\nFrom version 2.1.17 onwards, this library makes use of dynamic imports, if your\nRollup configuration `output.format` is set to `iife` or `umd`, consider\nsetting `inlineDynamicImports` to `true`, otherwise, change `output.format` to\nsomething else, like `esm` (for more details, consider checking [#21](https://github.com/henriquehbr/svelte-typewriter/issues/21))\n\n#### Test suite failed to run: SyntaxError: Unexpected token '<'\n\nThis happens because Jest cannot parse Svelte syntax right away, it needs to be\ntransformed by `svelte-jester` first, therefore, we must tell Jest to **NOT**\nignore `svelte-typewriter`, as by default, everything inside `node_modules` is\nignored and parsed as-is without any kind of pre-processing, this can be done\nby setting the `transformIgnorePatterns` property on your Jest configuration,\nexample below:\n\n```js\n// jest.config.js\nmodule.exports = {\n\ttransformIgnorePatterns: ['/node_modules/(?!(svelte-typewriter)/)']\n}\n```\n\n> More details on [#73](https://github.com/henriquehbr/svelte-typewriter/issues/73)\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch: `git checkout -b fix/my-new-bug-fix`\n3. Preview your changes by running the `dev` script on `package.json`\n4. Commit your changes: `git commit -am 'fix: solve some issue'`\n5. Push to the branch: `git push --set-upstream origin fix/my-new-bug-fix`\n6. Submit a pull request\n","readmeFilename":"README.md"}