css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia itaque odit nobis molestias dolorem est vel quas quam autem, reiciendis at in libero nisi fugiat facere architecto. Quia, necessitatibus nostrum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi sunt dolore placeat, pariatur porro quibusdam inventore eveniet. Corrupti labore reprehenderit laborum saepe recusandae quia soluta voluptatibus voluptatum consectetur! Reiciendis, quisquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. In debitis corrupti qui quasi, suscipit ex aut! Excepturi eveniet rem ipsum, consectetur quo minus nobis quaerat accusantium adipisci deserunt, voluptatibus aspernatur?
Doloribus inventore nam quasi cupiditate tempore officiis fuga illo eos minima reiciendis itaque necessitatibus quidem blanditiis ab, natus quia, perferendis nulla? Necessitatibus consequuntur eius, perferendis aliquam vero alias enim quibusdam.
Quod magnam necessitatibus tempore error possimus saepe eveniet quis unde deleniti, aperiam nostrum ipsa vel blanditiis excepturi libero tenetur ab sint doloremque dignissimos. Repellendus magni porro eos a ex quisquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum id, provident autem, tempore dolore reiciendis rerum eius ab, quia odio accusantium assumenda. At rem tenetur quod voluptas minus, explicabo autem!
Nostrum, numquam ex facilis eum laboriosam quasi. Quos voluptas ex laudantium quasi modi esse fuga totam, cupiditate eius officia rerum quibusdam molestiae dolorum dignissimos ut neque debitis voluptatem? Eligendi, repudiandae.
Consectetur debitis voluptatem quae aliquam deleniti veniam accusantium autem praesentium, magnam, quas qui neque, odit aut doloremque magni natus eum. Omnis cumque doloribus repellendus veniam itaque ipsa voluptates corrupti sit.
Praesentium aspernatur expedita consectetur eligendi sapiente inventore, cumque facere neque consequatur eum eaque, doloremque ipsum tempore similique eveniet nulla quaerat, corporis iusto earum temporibus. Rerum reiciendis nemo esse fugit porro!
Harum velit, accusantium voluptate optio accusamus porro ipsa quos sit dolore itaque doloremque, nesciunt esse id similique, magnam labore non ab ut numquam ullam beatae? Excepturi illo nostrum sequi omnis!
Eligendi earum debitis molestias rem aspernatur. Laudantium assumenda accusamus, suscipit cumque natus officiis soluta consequuntur nemo quisquam delectus nobis architecto eum ducimus exercitationem quidem minima necessitatibus adipisci ipsum id harum.
Consectetur iste dolorum eaque maiores hic. Illo eius provident tenetur, veniam blanditiis ea rem amet eaque delectus qui nemo quod ipsa sint, id esse facere ratione sequi veritatis minus. Ducimus.
Mollitia impedit ullam esse ab tempora deleniti iusto nemo quasi magni ut culpa eligendi vero illum non ipsum modi cupiditate veritatis, vel eaque necessitatibus sequi aut sint labore doloremque! Itaque.
Assumenda enim porro distinctio quae voluptates eum ex tempore necessitatibus! Rem laboriosam perspiciatis officiis, quae a, fuga quo exercitationem eveniet voluptates deserunt assumenda alias, quas error velit sequi laborum aperiam?
Earum iure sed deleniti nulla voluptatem molestiae incidunt quam, aliquid repellendus distinctio. A, adipisci! Cum quisquam ullam expedita corrupti cumque natus, dolor ab vitae, magnam similique atque! Culpa, alias facilis.
Libero, voluptatibus minus! Architecto commodi in quia repellat tempora et iure dolorum amet dolor voluptates, fugiat recusandae consectetur minus veniam velit quae odio consequatur quo magnam nulla voluptatum maxime ab!
Veniam libero aspernatur sit sequi veritatis minima adipisci culpa facilis autem unde, nisi corporis quos quod reprehenderit sint quo repudiandae accusantium, ad tempora quis repellat eligendi vel nesciunt! Incidunt, itaque?
Quae possimus doloremque eveniet est aliquid, illo iusto omnis officia quia eligendi tenetur ratione ea expedita ut sequi delectus reiciendis odit magni nulla ex velit repudiandae nostrum, hic explicabo? Officiis.
Sunt accusamus sequi molestias doloribus similique dicta consequatur omnis ipsam quam libero qui consectetur facilis possimus at eveniet sint, tenetur recusandae ducimus quae ex ipsum eius. Magni eligendi repellat libero.
Cupiditate distinctio quibusdam unde voluptatum laborum vero maiores consectetur est incidunt quas ipsam accusamus itaque atque id quis tempore beatae nesciunt, non officia enim, deserunt impedit labore. Nostrum, enim ab.
Commodi similique temporibus tenetur doloremque distinctio illum vero? Sint rerum itaque, nostrum sed laborum magnam officiis, accusamus non, odit quaerat ea pariatur sunt saepe dignissimos. Distinctio ut consectetur fugit? Autem.
Perferendis deleniti quia blanditiis. Provident culpa rerum tempore aut iste deserunt magnam tenetur eaque sequi quidem, commodi iure sint doloribus deleniti ipsa maiores earum quasi possimus? Nam recusandae non quisquam.
Rerum maxime omnis error, reiciendis dolor autem et architecto. Laudantium debitis, dolore ipsam odio a, quia consequuntur sunt cupiditate voluptatum earum, dolores praesentium quae atque rem nulla. Alias, nihil asperiores.
Autem placeat magnam voluptatum omnis laboriosam doloribus consequuntur facilis dolor, aperiam perferendis blanditiis velit ex dolore corporis, a cum incidunt quo, quidem alias error sapiente aliquam dicta. Voluptatem, magnam saepe?
Consectetur dolores, voluptas inventore quaerat deleniti aspernatur numquam enim corporis ipsum rerum assumenda sint laborum vero fuga fugiat. Dicta expedita ducimus unde consequuntur quisquam autem aliquam blanditiis consequatur ullam ipsum.
Quas natus, enim a suscipit nulla recusandae omnis? Consectetur nam architecto officia amet. Neque debitis repellat aliquid rerum, cum voluptatibus quasi deleniti sit recusandae, excepturi quos voluptatum tempora saepe temporibus.
Cupiditate in rem, ad at eos natus magnam accusamus, a reprehenderit iusto earum perspiciatis, non voluptatem. Molestiae quia neque non vero dolor? Est, repellat! Ullam libero optio repellat repellendus eius.
Tempore qui laborum consequuntur suscipit animi corrupti exercitationem necessitatibus ipsam amet non architecto iste eius obcaecati excepturi nisi quos modi veritatis, iusto error explicabo doloremque quas dolor placeat. Beatae, quam.
Perferendis tempora fuga ad, distinctio corrupti exercitationem, at iure illo consectetur tenetur saepe quidem assumenda velit, dolore ratione laborum quo quasi doloremque asperiores numquam. Voluptatum provident quo numquam quos qui?
Dolore, hic nesciunt deserunt asperiores, adipisci quae voluptate reiciendis repellat, a illo vitae? Mollitia animi eaque velit sunt nemo explicabo quam voluptatibus, molestias in exercitationem, quia accusantium optio odio voluptatum.
Accusantium incidunt vero assumenda rem id, quam, sit, expedita quidem sequi suscipit repudiandae rerum animi alias. Veniam temporibus cumque quam dolores quisquam deserunt ipsa ab porro. Odio tempore sint libero!
Nobis non asperiores aperiam, velit incidunt rerum atque quos sit, expedita dicta eaque quod similique odit adipisci sequi praesentium sunt nesciunt minus sint culpa dolores animi quasi? Perferendis, iste ratione.
Minima illum labore numquam placeat enim? Molestias vel autem cum tempore soluta nobis earum? Sint, qui. Sint voluptatem voluptatibus culpa illo et. Nobis est ducimus distinctio, sapiente maxime praesentium maiores.
Magnam ex amet pariatur aut iusto quos eos accusantium officiis, possimus ducimus sint architecto nobis earum qui corporis inventore assumenda ea! Facilis voluptatibus aut repellat dolorum molestiae a facere provident!
Aliquid eligendi optio exercitationem suscipit aperiam saepe, atque, quasi quas, fuga reiciendis unde. Ea vero, inventore laboriosam explicabo deleniti sint dicta cupiditate, officia laudantium quidem sequi itaque nesciunt ex minima.
Voluptatum rem minima fugiat fuga repellendus dignissimos vero, ad provident. Error aut porro vero eaque soluta! Ex animi dicta aliquam non, aut modi error nemo! Facilis ad minus rem temporibus!
Possimus explicabo consequuntur molestias magni! Commodi libero veniam mollitia porro fugit excepturi laboriosam soluta nam, maxime, explicabo quam magni animi illo nulla molestiae! Voluptates unde nulla assumenda ut soluta placeat.
Dolor molestiae esse minus quis fugiat unde explicabo ex, animi eos ratione hic culpa illum alias, quo tempore reprehenderit quaerat nobis id maxime aperiam? Perferendis possimus facere debitis ea sit!
Iure aspernatur inventore veniam modi repudiandae asperiores repellat, est expedita velit delectus, atque laboriosam rerum voluptates placeat! Rerum alias blanditiis molestias soluta, corporis voluptatum, vero necessitatibus consequatur accusamus inventore laudantium.
Animi sunt repellendus facere vel ea fugiat sint. Qui aut, totam nobis quibusdam maiores, ea nostrum itaque vitae corporis officia assumenda voluptatum sed adipisci cum ipsum minus inventore neque? Dolorem.
Sunt corporis quas consectetur. Iste dolor ipsum doloribus laboriosam perspiciatis incidunt voluptatem vitae. Amet alias, dolorem temporibus facere id eaque repudiandae debitis sunt vel ducimus facilis sapiente ut inventore dignissimos?
Facilis perspiciatis rerum iure suscipit, mollitia assumenda illum iste non nulla sapiente quis tempore! Maxime aperiam saepe, eveniet et voluptatum quasi magnam nesciunt sint eius mollitia delectus molestias ratione? Laboriosam.
Labore quas, minus eveniet dignissimos aperiam accusantium id animi ab, voluptates iste nobis qui recusandae maxime enim distinctio ratione necessitatibus incidunt iure tempore mollitia quae est, voluptate non omnis. Quasi.
Ipsa facilis tempore hic incidunt corporis. Quae eaque minima fugit voluptatem nemo odio sint, voluptas quis rem sit, voluptate incidunt iusto autem fuga pariatur, nostrum voluptatum nulla repudiandae possimus aliquam!
Praesentium, harum repellat ad consequatur et fugit illum rerum eaque tempore aspernatur! Excepturi suscipit enim magni expedita optio laboriosam ducimus repellendus exercitationem harum reprehenderit, animi et minima perspiciatis nam eaque?
Illo earum veniam, ipsa corporis totam rerum aut quisquam recusandae maxime minus soluta doloremque, provident neque perspiciatis praesentium consectetur esse nisi. Tenetur doloremque fugiat quas blanditiis esse modi? Obcaecati, quaerat?
Soluta nostrum quidem provident praesentium, dolore cumque possimus ab eaque repellat culpa nesciunt. Qui, ex facere quidem repellat beatae velit nihil voluptas asperiores facilis sit est architecto labore tempore nobis.
Doloremque, qui sit illum aliquid nisi placeat minus corporis consequatur non odio distinctio repellendus eligendi quam labore at pariatur, provident ducimus? Sint quaerat corporis laborum nemo illum quas quam distinctio!

Voluptatum, deleniti odio, veritatis impedit odit aut doloremque sed eius modi velit accusantium. Aperiam voluptatibus sapiente quidem delectus ab earum nostrum sunt nesciunt est! Repudiandae nesciunt blanditiis velit consectetur vitae.
Dolore iure ullam similique debitis ipsum. Vero architecto dicta, expedita et repellendus maxime qui nisi dignissimos neque mollitia quaerat, doloremque eum porro ab distinctio consequuntur ratione similique sunt beatae saepe?
Rerum, ut dolorem! Ipsam rerum maxime incidunt, sequi asperiores ipsa quis voluptas, inventore a explicabo amet. Eligendi obcaecati sequi dolorem quos nisi, sapiente deleniti, voluptatem porro quaerat enim tenetur aliquid. </p>
            
          
!
            
              body{
  background:#000;
  max-width:666px;
  margin:auto;
  font-family:courier,monospace;
  line-height:1.4;
}
span{
  animation:colorz 6s linear infinite alternate;
}

@keyframes colorz{
  0%{color:hsl(0,100%,50%)}
  100%{color:hsl(270,100%,50%)}
}
            
          
!
            
              var p = document.querySelector('p');
var text = p.textContent;
var newText = "";

for(var i = 0;i<text.length;i++){
  // version simple :
  // newText+="<span>"+text[i]+"</span>";
  // version ++
  var delay =  i*6+"ms"; 
  newText+="<span style='animation-delay:"+ delay + "'>"+text[i]+"</span>";
}

p.innerHTML = newText;

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console