my love is like a fire tornado

jump to demo

%%
some sound to play for some extra texture, the element is resizable so you can stifle extra stimuli.

<section id="sound">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="315" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/qBAPsQkS8QI?si=CkA51qfeJeLb9Mfw" title="YouTube video player" width="560"></iframe>
</section>

    from nbconvert_a11y.table import new
    bs4.Tag._repr_html_ = bs4.Tag.prettify    
    words = \
last 🌃 my wife and i had a sweet date drinking boba, playing pinball, seeing 🌪twisters🌪 with the likable glen powell, and eating 🍔. i 🫶 her a lot. also, 🔥 tornado!

    df = DataFrame(index=pandas.RangeIndex(len(words)), columns=["θ", "x", "y", "z", "letter"])
    df.θ = df.index * numpy.pi / 28
    df.x = (df.index * numpy.pi / 180).map(numpy.cos)
    df.y = df.index / 10
    df.z = (df.index * numpy.pi / 180).map(numpy.sin)
    df.letter = list(new("td", x) for x in words)
    section = df.table(dict(max_rows=1000, figcaption=-1), caption=words, id="twisters")
hide the table because its content is repeated in the figure caption

    section.html.table.attrs.update({"aria-hidden": "true"})    
    display(section); display\
```css
@property --r {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}
#twisters {
    --w: 480px;
    --h: 600px;
    --d: 600px;
    --r: 0deg;
    --t: 15s;
    thead, tfoot {display: none;}
    tbody {
        display: block;
        width: var(--w);
        height: var(--h);
        animation: var(--t) infinite linear spin;
        transform: rotateY(var(--r));
        transform-style: preserve-3d;
        tr {
            background: unset !important;
            transform-style: preserve-3d;
            position: absolute;
            --wiggle: calc(sin(var(--0) * 10rad) * -1px);
            th, td {display: none;}
            td:last-child {
                display: block; font-weight: bold; font-size: 1.5rem;
            }
            transform: 
                translate3d(
                    calc((var(--1) - var(--1-min)) / var(--1-diff) * var(--w) / 3 + var(--wiggle) / 2),
                    calc((var(--2) - var(--2-min)) / var(--2-diff) * var(--h) ),
                    calc((var(--3) - var(--3-min)) / var(--3-diff) * var(--d) - var(--d) / 3 + var(--wiggle) / 2)
                )
                translateX(calc(var(--w) / 2))
                translate(-50%, -50%)
                rotateY(calc(var(--0) * 1rad))
                ;
        }
    }
}
#sound {resize: both; overflow: auto; filter: grayscale(100%);}
@supports (background: -moz-element(#twisters)) {
    [href="#twisters"] {
        display: block; width: 100%; height: 400px;
        font-weight: 1000;
        font-size: 5rem;
        background: -moz-element(#twisters); 
        background-size: contain; 
        filter: grayscale(100%);}}
/** i think keyframes need to go last **/
@keyframes spin { 0% { --r: 0deg; } 100% { --r: 360deg; } }
```

pandas dataframe with 163 rows, 5 columns with 1 index levels and 1 columns levels.

None	'θ'	'x'	'y'	'z'	'letter'
0	0.000	1.000	0.000	0.000	l
1	0.112	1.000	0.100	0.017	a
2	0.224	0.999	0.200	0.035	s
3	0.337	0.999	0.300	0.052	t
4	0.449	0.998	0.400	0.070
5	0.561	0.996	0.500	0.087	🌃
6	0.673	0.995	0.600	0.105
7	0.785	0.993	0.700	0.122	m
8	0.898	0.990	0.800	0.139	y
9	1.010	0.988	0.900	0.156
10	1.122	0.985	1.000	0.174	w
11	1.234	0.982	1.100	0.191	i
12	1.346	0.978	1.200	0.208	f
13	1.459	0.974	1.300	0.225	e
14	1.571	0.970	1.400	0.242
15	1.683	0.966	1.500	0.259	a
16	1.795	0.961	1.600	0.276	n
17	1.907	0.956	1.700	0.292	d
18	2.020	0.951	1.800	0.309
19	2.132	0.946	1.900	0.326	i
20	2.244	0.940	2.000	0.342
21	2.356	0.934	2.100	0.358	h
22	2.468	0.927	2.200	0.375	a
23	2.581	0.921	2.300	0.391	d
24	2.693	0.914	2.400	0.407
25	2.805	0.906	2.500	0.423	a
26	2.917	0.899	2.600	0.438
27	3.029	0.891	2.700	0.454	s
28	3.142	0.883	2.800	0.469	w
29	3.254	0.875	2.900	0.485	e
30	3.366	0.866	3.000	0.500	e
31	3.478	0.857	3.100	0.515	t
32	3.590	0.848	3.200	0.530
33	3.703	0.839	3.300	0.545	d
34	3.815	0.829	3.400	0.559	a
35	3.927	0.819	3.500	0.574	t
36	4.039	0.809	3.600	0.588	e
37	4.151	0.799	3.700	0.602
38	4.264	0.788	3.800	0.616	d
39	4.376	0.777	3.900	0.629	r
40	4.488	0.766	4.000	0.643	i
41	4.600	0.755	4.100	0.656	n
42	4.712	0.743	4.200	0.669	k
43	4.825	0.731	4.300	0.682	i
44	4.937	0.719	4.400	0.695	n
45	5.049	0.707	4.500	0.707	g
46	5.161	0.695	4.600	0.719
47	5.273	0.682	4.700	0.731	b
48	5.386	0.669	4.800	0.743	o
49	5.498	0.656	4.900	0.755	b
50	5.610	0.643	5.000	0.766	a
51	5.722	0.629	5.100	0.777	,
52	5.834	0.616	5.200	0.788
53	5.947	0.602	5.300	0.799	p
54	6.059	0.588	5.400	0.809	l
55	6.171	0.574	5.500	0.819	a
56	6.283	0.559	5.600	0.829	y
57	6.395	0.545	5.700	0.839	i
58	6.508	0.530	5.800	0.848	n
59	6.620	0.515	5.900	0.857	g
60	6.732	0.500	6.000	0.866
61	6.844	0.485	6.100	0.875	p
62	6.956	0.469	6.200	0.883	i
63	7.069	0.454	6.300	0.891	n
64	7.181	0.438	6.400	0.899	b
65	7.293	0.423	6.500	0.906	a
66	7.405	0.407	6.600	0.914	l
67	7.517	0.391	6.700	0.921	l
68	7.630	0.375	6.800	0.927	,
69	7.742	0.358	6.900	0.934
70	7.854	0.342	7.000	0.940	s
71	7.966	0.326	7.100	0.946	e
72	8.078	0.309	7.200	0.951	e
73	8.191	0.292	7.300	0.956	i
74	8.303	0.276	7.400	0.961	n
75	8.415	0.259	7.500	0.966	g
76	8.527	0.242	7.600	0.970
77	8.639	0.225	7.700	0.974	🌪
78	8.752	0.208	7.800	0.978	t
79	8.864	0.191	7.900	0.982	w
80	8.976	0.174	8.000	0.985	i
81	9.088	0.156	8.100	0.988	s
82	9.200	0.139	8.200	0.990	t
83	9.313	0.122	8.300	0.993	e
84	9.425	0.105	8.400	0.995	r
85	9.537	0.087	8.500	0.996	s
86	9.649	0.070	8.600	0.998	🌪
87	9.761	0.052	8.700	0.999
88	9.874	0.035	8.800	0.999	w
89	9.986	0.017	8.900	1.000	i
90	10.098	0.000	9.000	1.000	t
91	10.210	-0.017	9.100	1.000	h
92	10.322	-0.035	9.200	0.999
93	10.435	-0.052	9.300	0.999	t
94	10.547	-0.070	9.400	0.998	h
95	10.659	-0.087	9.500	0.996	e
96	10.771	-0.105	9.600	0.995
97	10.883	-0.122	9.700	0.993	l
98	10.996	-0.139	9.800	0.990	i
99	11.108	-0.156	9.900	0.988	k
100	11.220	-0.174	10.000	0.985	a
101	11.332	-0.191	10.100	0.982	b
102	11.444	-0.208	10.200	0.978	l
103	11.557	-0.225	10.300	0.974	e
104	11.669	-0.242	10.400	0.970
105	11.781	-0.259	10.500	0.966	g
106	11.893	-0.276	10.600	0.961	l
107	12.005	-0.292	10.700	0.956	e
108	12.118	-0.309	10.800	0.951	n
109	12.230	-0.326	10.900	0.946
110	12.342	-0.342	11.000	0.940	p
111	12.454	-0.358	11.100	0.934	o
112	12.566	-0.375	11.200	0.927	w
113	12.679	-0.391	11.300	0.921	e
114	12.791	-0.407	11.400	0.914	l
115	12.903	-0.423	11.500	0.906	l
116	13.015	-0.438	11.600	0.899	,
117	13.127	-0.454	11.700	0.891
118	13.240	-0.469	11.800	0.883	a
119	13.352	-0.485	11.900	0.875	n
120	13.464	-0.500	12.000	0.866	d
121	13.576	-0.515	12.100	0.857
122	13.688	-0.530	12.200	0.848	e
123	13.801	-0.545	12.300	0.839	a
124	13.913	-0.559	12.400	0.829	t
125	14.025	-0.574	12.500	0.819	i
126	14.137	-0.588	12.600	0.809	n
127	14.249	-0.602	12.700	0.799	g
128	14.362	-0.616	12.800	0.788
129	14.474	-0.629	12.900	0.777	🍔
130	14.586	-0.643	13.000	0.766	.
131	14.698	-0.656	13.100	0.755
132	14.810	-0.669	13.200	0.743	i
133	14.923	-0.682	13.300	0.731
134	15.035	-0.695	13.400	0.719	🫶
135	15.147	-0.707	13.500	0.707
136	15.259	-0.719	13.600	0.695	h
137	15.371	-0.731	13.700	0.682	e
138	15.484	-0.743	13.800	0.669	r
139	15.596	-0.755	13.900	0.656
140	15.708	-0.766	14.000	0.643	a
141	15.820	-0.777	14.100	0.629
142	15.932	-0.788	14.200	0.616	l
143	16.045	-0.799	14.300	0.602	o
144	16.157	-0.809	14.400	0.588	t
145	16.269	-0.819	14.500	0.574	.
146	16.381	-0.829	14.600	0.559
147	16.493	-0.839	14.700	0.545	a
148	16.606	-0.848	14.800	0.530	l
149	16.718	-0.857	14.900	0.515	s
150	16.830	-0.866	15.000	0.500	o
151	16.942	-0.875	15.100	0.485	,
152	17.054	-0.883	15.200	0.469
153	17.167	-0.891	15.300	0.454	🔥
154	17.279	-0.899	15.400	0.438
155	17.391	-0.906	15.500	0.423	t
156	17.503	-0.914	15.600	0.407	o
157	17.615	-0.921	15.700	0.391	r
158	17.728	-0.927	15.800	0.375	n
159	17.840	-0.934	15.900	0.358	a
160	17.952	-0.940	16.000	0.342	d
161	18.064	-0.946	16.100	0.326	o
162	18.176	-0.951	16.200	0.309	!
min	0.000	-0.951	0.000	0.000	nan
max	18.176	1.000	16.200	1.000	nan
diff	18.176	1.951	16.200	1.000	nan

last 🌃 my wife and i had a sweet date drinking boba, playing pinball, seeing 🌪twisters🌪 with the likable glen powell, and eating 🍔. i 🫶 her a lot. also, 🔥 tornado!

some sound to play for some extra texture, the element is resizable so you can stifle extra stimuli.

from nbconvert_a11y.table import new
bs4.Tag._repr_html_ = bs4.Tag.prettify    
words = \

last 🌃 my wife and i had a sweet date drinking boba, playing pinball, seeing 🌪twisters🌪 with the likable glen powell, and eating 🍔. i 🫶 her a lot. also, 🔥 tornado!

df = DataFrame(index=pandas.RangeIndex(len(words)), columns=["θ", "x", "y", "z", "letter"])
df.θ = df.index * numpy.pi / 28
df.x = (df.index * numpy.pi / 180).map(numpy.cos)
df.y = df.index / 10
df.z = (df.index * numpy.pi / 180).map(numpy.sin)
df.letter = list(new("td", x) for x in words)
section = df.table(dict(max_rows=1000, figcaption=-1), caption=words, id="twisters")

hide the table because its content is repeated in the figure caption

section.html.table.attrs.update({"aria-hidden": "true"})    
display(section); display\

@property --r {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}
#twisters {
    --w: 480px;
    --h: 600px;
    --d: 600px;
    --r: 0deg;
    --t: 15s;
    thead, tfoot {display: none;}
    tbody {
        display: block;
        width: var(--w);
        height: var(--h);
        animation: var(--t) infinite linear spin;
        transform: rotateY(var(--r));
        transform-style: preserve-3d;
        tr {
            background: unset !important;
            transform-style: preserve-3d;
            position: absolute;
            --wiggle: calc(sin(var(--0) * 10rad) * -1px);
            th, td {display: none;}
            td:last-child {
                display: block; font-weight: bold; font-size: 1.5rem;
            }
            transform: 
                translate3d(
                    calc((var(--1) - var(--1-min)) / var(--1-diff) * var(--w) / 3 + var(--wiggle) / 2),
                    calc((var(--2) - var(--2-min)) / var(--2-diff) * var(--h) ),
                    calc((var(--3) - var(--3-min)) / var(--3-diff) * var(--d) - var(--d) / 3 + var(--wiggle) / 2)
                )
                translateX(calc(var(--w) / 2))
                translate(-50%, -50%)
                rotateY(calc(var(--0) * 1rad))
                ;
        }
    }
}
#sound {resize: both; overflow: auto; filter: grayscale(100%);}
@supports (background: -moz-element(#twisters)) {
    [href="#twisters"] {
        display: block; width: 100%; height: 400px;
        font-weight: 1000;
        font-size: 5rem;
        background: -moz-element(#twisters); 
        background-size: contain; 
        filter: grayscale(100%);}}
/** i think keyframes need to go last **/
@keyframes spin { 0% { --r: 0deg; } 100% { --r: 360deg; } }