[{"data":1,"prerenderedAt":381},["ShallowReactive",2],{"docs:\u002Fdocs\u002Ftext":3},{"id":4,"title":5,"body":6,"description":373,"extension":374,"meta":375,"navigation":48,"path":376,"rawbody":377,"seo":378,"stem":379,"__hash__":380},"docs\u002Fdocs\u002Ftext.md","Text splitting",{"type":7,"value":8,"toc":367},"minimark",[9,13,76,162,166,171,178,211,242,246,253,315,330,344,347,353,357,360,363],[10,11,12],"p",{},"The text module wraps each character, word, or line in a span you can animate with Kinesis CSS.",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-js shiki shiki-themes github-dark-default","import { splitText } from \"@amineyarman\u002Fkinesis\u002Ftext\"\n\nsplitText(\".headline\", \"chars\")   \u002F\u002F or \"words\", or \"lines\"\n","js","",[21,22,23,43,50],"code",{"__ignoreMap":19},[24,25,28,32,36,39],"span",{"class":26,"line":27},"line",1,[24,29,31],{"class":30},"suJrU","import",[24,33,35],{"class":34},"sZEs4"," { splitText } ",[24,37,38],{"class":30},"from",[24,40,42],{"class":41},"s9uIt"," \"@amineyarman\u002Fkinesis\u002Ftext\"\n",[24,44,46],{"class":26,"line":45},2,[24,47,49],{"emptyLinePlaceholder":48},true,"\n",[24,51,53,57,60,63,66,69,72],{"class":26,"line":52},3,[24,54,56],{"class":55},"sc3cj","splitText",[24,58,59],{"class":34},"(",[24,61,62],{"class":41},"\".headline\"",[24,64,65],{"class":34},", ",[24,67,68],{"class":41},"\"chars\"",[24,70,71],{"class":34},")   ",[24,73,75],{"class":74},"sH3jZ","\u002F\u002F or \"words\", or \"lines\"\n",[14,77,81],{"className":78,"code":79,"language":80,"meta":19,"style":19},"language-css shiki shiki-themes github-dark-default",".headline .k-char {\n  --k-when: view once;\n  --k-opacity: 0 1;\n  --k-y: 0.5em 0;\n  --k-stagger: 35ms;\n}\n","css",[21,82,83,95,104,121,140,156],{"__ignoreMap":19},[24,84,85,89,92],{"class":26,"line":27},[24,86,88],{"class":87},"sFSAA",".headline",[24,90,91],{"class":87}," .k-char",[24,93,94],{"class":34}," {\n",[24,96,97,101],{"class":26,"line":45},[24,98,100],{"class":99},"sQhOw","  --k-when",[24,102,103],{"class":34},": view once;\n",[24,105,106,109,112,115,118],{"class":26,"line":52},[24,107,108],{"class":99},"  --k-opacity",[24,110,111],{"class":34},": ",[24,113,114],{"class":87},"0",[24,116,117],{"class":87}," 1",[24,119,120],{"class":34},";\n",[24,122,124,127,129,132,135,138],{"class":26,"line":123},4,[24,125,126],{"class":99},"  --k-y",[24,128,111],{"class":34},[24,130,131],{"class":87},"0.5",[24,133,134],{"class":30},"em",[24,136,137],{"class":87}," 0",[24,139,120],{"class":34},[24,141,143,146,148,151,154],{"class":26,"line":142},5,[24,144,145],{"class":99},"  --k-stagger",[24,147,111],{"class":34},[24,149,150],{"class":87},"35",[24,152,153],{"class":30},"ms",[24,155,120],{"class":34},[24,157,159],{"class":26,"line":158},6,[24,160,161],{"class":34},"}\n",[163,164],"demo",{"id":165},"headline",[167,168,170],"h2",{"id":169},"declaratively","Declaratively",[10,172,173,174,177],{},"Mark elements with ",[21,175,176],{},"data-k-split"," and split them all at once:",[14,179,183],{"className":180,"code":181,"language":182,"meta":19,"style":19},"language-html shiki shiki-themes github-dark-default","\u003Ch1 data-k-split=\"words\">Motion, declared.\u003C\u002Fh1>\n","html",[21,184,185],{"__ignoreMap":19},[24,186,187,190,194,197,200,203,206,208],{"class":26,"line":27},[24,188,189],{"class":34},"\u003C",[24,191,193],{"class":192},"sPWt5","h1",[24,195,196],{"class":87}," data-k-split",[24,198,199],{"class":34},"=",[24,201,202],{"class":41},"\"words\"",[24,204,205],{"class":34},">Motion, declared.\u003C\u002F",[24,207,193],{"class":192},[24,209,210],{"class":34},">\n",[14,212,214],{"className":16,"code":213,"language":18,"meta":19,"style":19},"import { splitAll } from \"@amineyarman\u002Fkinesis\u002Ftext\"\n\nsplitAll()   \u002F\u002F or splitAll(someContainer)\n",[21,215,216,227,231],{"__ignoreMap":19},[24,217,218,220,223,225],{"class":26,"line":27},[24,219,31],{"class":30},[24,221,222],{"class":34}," { splitAll } ",[24,224,38],{"class":30},[24,226,42],{"class":41},[24,228,229],{"class":26,"line":45},[24,230,49],{"emptyLinePlaceholder":48},[24,232,233,236,239],{"class":26,"line":52},[24,234,235],{"class":55},"splitAll",[24,237,238],{"class":34},"()   ",[24,240,241],{"class":74},"\u002F\u002F or splitAll(someContainer)\n",[167,243,245],{"id":244},"what-you-get","What you get",[10,247,248,249,252],{},"Each piece is an ",[21,250,251],{},"inline-block"," span, so it can be transformed.",[254,255,256,269],"table",{},[257,258,259],"thead",{},[260,261,262,266],"tr",{},[263,264,265],"th",{},"Split by",[263,267,268],{},"Classes on each piece",[270,271,272,290,301],"tbody",{},[260,273,274,280],{},[275,276,277],"td",{},[21,278,279],{},"chars",[275,281,282,285,286,289],{},[21,283,284],{},".k-word"," wrapping ",[21,287,288],{},".k-char",", so words never break mid-line",[260,291,292,297],{},[275,293,294],{},[21,295,296],{},"words",[275,298,299],{},[21,300,284],{},[260,302,303,308],{},[275,304,305],{},[21,306,307],{},"lines",[275,309,310,285,313],{},[21,311,312],{},".k-line",[21,314,284],{},[10,316,317,318,321,322,325,326,329],{},"Each piece gets ",[21,319,320],{},"--k-index",", its position in the whole element, so ",[21,323,324],{},"--k-stagger"," follows reading order across words. It works in your own CSS too, for example ",[21,327,328],{},"transition-delay: calc(var(--k-index) * 20ms)",".",[10,331,332,335,336,339,340,343],{},[21,333,334],{},"splitText()"," returns ",[21,337,338],{},"{ chars, words, lines, revert() }",". ",[21,341,342],{},"revert()"," restores the original content. Splitting an element again reverts it first.",[167,345,346],{"id":307},"Lines",[10,348,349,352],{},[21,350,351],{},"\"lines\""," groups words where the browser wraps them, and splits again when the element's width changes. It needs plain text. For text containing links or other elements, split by words.",[167,354,356],{"id":355},"accessibility","Accessibility",[10,358,359],{},"Screen readers read split text normally. Each run of text keeps a visually hidden copy, and the animated pieces are hidden from assistive technology. A heading is announced as the phrase \"Motion, declared.\" Links and emphasis inside the text keep working.",[10,361,362],{},"Characters are split by grapheme, so emoji and accented letters stay whole.",[364,365,366],"style",{},"html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html pre.shiki code .sPWt5, html code.shiki .sPWt5{--shiki-default:#7EE787}",{"title":19,"searchDepth":52,"depth":52,"links":368},[369,370,371,372],{"id":169,"depth":45,"text":170},{"id":244,"depth":45,"text":245},{"id":307,"depth":45,"text":346},{"id":355,"depth":45,"text":356},"Split text into characters, words, or lines that can move, without breaking screen readers.","md",{},"\u002Fdocs\u002Ftext","---\ntitle: Text splitting\ndescription: Split text into characters, words, or lines that can move, without breaking screen readers.\n---\n\nThe text module wraps each character, word, or line in a span you can animate with Kinesis CSS.\n\n```js\nimport { splitText } from \"@amineyarman\u002Fkinesis\u002Ftext\"\n\nsplitText(\".headline\", \"chars\")   \u002F\u002F or \"words\", or \"lines\"\n```\n\n```css\n.headline .k-char {\n  --k-when: view once;\n  --k-opacity: 0 1;\n  --k-y: 0.5em 0;\n  --k-stagger: 35ms;\n}\n```\n\n::demo{id=\"headline\"}\n::\n\n## Declaratively\n\nMark elements with `data-k-split` and split them all at once:\n\n```html\n\u003Ch1 data-k-split=\"words\">Motion, declared.\u003C\u002Fh1>\n```\n\n```js\nimport { splitAll } from \"@amineyarman\u002Fkinesis\u002Ftext\"\n\nsplitAll()   \u002F\u002F or splitAll(someContainer)\n```\n\n## What you get\n\nEach piece is an `inline-block` span, so it can be transformed.\n\n| Split by | Classes on each piece |\n| --- | --- |\n| `chars` | `.k-word` wrapping `.k-char`, so words never break mid-line |\n| `words` | `.k-word` |\n| `lines` | `.k-line` wrapping `.k-word` |\n\nEach piece gets `--k-index`, its position in the whole element, so `--k-stagger` follows reading order across words. It works in your own CSS too, for example `transition-delay: calc(var(--k-index) * 20ms)`.\n\n`splitText()` returns `{ chars, words, lines, revert() }`. `revert()` restores the original content. Splitting an element again reverts it first.\n\n## Lines\n\n`\"lines\"` groups words where the browser wraps them, and splits again when the element's width changes. It needs plain text. For text containing links or other elements, split by words.\n\n## Accessibility\n\nScreen readers read split text normally. Each run of text keeps a visually hidden copy, and the animated pieces are hidden from assistive technology. A heading is announced as the phrase \"Motion, declared.\" Links and emphasis inside the text keep working.\n\nCharacters are split by grapheme, so emoji and accented letters stay whole.\n",{"title":5,"description":373},"docs\u002Ftext","Ev8ody5omqeSOacG00Zdr2ojsL1lcCLJi1WFdqD2fzc",1791309903035]