Woohoo! We've been listed in the Single page website design article by DesignRush!

Build interactive web with less code

Create interactive effects without writing any JS or CSS and keep focused on your HTML. Choose from beautiful Bootstrap templates to start right ahead

Get Started 

<!-- Parallax move on scroll -->
<div data-tor="scroll:@parallax(40)">
  <!-- Revealing effect -->
  <div data-tor="inview:[scale.from(75) fade.in] quad slower" class="bg-white shadow-lg shadow-intensity-sm">

    <!-- ---- -->
    <!-- Hero -->
    <!-- ---- -->

    <div id="hero" class="row">

      <!-- Title -->
      <div class="col">
        <h3 data-tor="inview:[fade.in pull.left(sm)] slower">Hello! Start your day with the nice reading</h3>
      </div>

      <!-- Icons -->
      <div class="center-v">

        <!-- Eye -->
        <div data-tor="inview:scale.from(0) delay(0ms) slow bounce">
          <div class="circle" data-tor="mouse:@parallax(5) ease-out">/div>
        </div>

        <!-- Circle -->
        <div data-tor="inview:scale.from(0) delay(50ms) slow bounce">
          <div data-tor-loop="spin slowest">...</div>
        </div>

        <!-- Rotate -->
        <div data-tor="inview:scale.from(0) delay(100ms) slow bounce">
          <div data-tor="mouseX:@T=rotateZ(0deg;180deg, {method: continuous}) ease-out">...</div>
        </div>

      </div>
      <!-- end Icons -->
    </div>
    <!-- end #hero.row -->

    <!-- ----- -->
    <!-- Cards -->
    <!-- ----- -->

    <div id="cards" class="row">

      <!-- Card 01 -->
      <div class="col-6">
        <a href="#" data-tor="hover:[push.up(sm) shadow(md) shadow-offset.down(sm)]">
          <div class="overlay-gradient" data-tor="inview:reveal(right) delay(0ms) slow exponential">
            <div class="overlay-content">
              <h4>10 tips for better time management</h4>
            </div>
            <img class="..." src="..." alt="Image">
          </div>
        </a>
      </div>

      <div class="col-3 flex-column">
        <!-- Card 02 -->
        <a href="#" data-tor="inview:clip.right__skew(sm) delay(50ms) slow exponential">
          <div class="bg-tor-violet" data-tor="hover:bg-darken(md)">
            <h6 class="text-white">Marketing webinars</h6>
            <div class="circle btn f.p-3 border border-white">
              <i class="text-white btn-arrow"></i>
            </div>
          </div>
        </a>

        <!-- Card 03 -->
        <a href="#" data-tor="inview:scale.from(0) delay(100ms) slow exponential">
          <div class="overlay-gradient" data-tor="hover:[scale.to(1.1) rotate.to(2deg)]">
            <div class="overlay-content">
              <h6>Nice breakfast</h6>
            </div>
            <img class="..." src="..." alt="Image">
          </div>
        </a>
      </div>

      <!-- Card 04 -->
      <div class="col-3">
        <a href="#" data-tor-parent="hover">
          <div class="overlay-gradient" data-tor="inview:[fade.in pull.up(sm)] slow exponential">
            <div class="overlay-content align-items-end text-white p-4">
              <h6>Nice breakfast</h6>
            </div>
            <img data-tor="hover(p):[scale.to(125%) opacity(80)] slow" class="..." src="..." alt="Image">
          </div>
        </a>
      </div>

    </div>
    <!-- end #cards.row -->
  </div>

  <!-- ----------- -->
  <!-- Decorations -->
  <!-- ----------- -->

  <!-- X axis mouse-based move -->
  <div data-tor="mouseX:@parallax(20)">
    <div class="...">px</div>
  </div>

  <!-- Y axis mouse-based move -->
  <div data-tor="mouseY:@parallax(20)">
    <div class="...">px</div>
  </div>
</div>
X: px
Y: px

A toolbox for your next Bootstrap project


Torus Kit included features helps you to make your workflow worry-free

Circle Parallax Mountain Parallax
blue bike
Mountain Parallax

Manufacturer

Mika Amaro

Model

Single Speed

Find a Dealer
Circle Parallax Mountain Parallax
grey bike
blue bike
dark-blue bike
New!
Mountain Parallax

Manufacturer

Mika Amaro

Model

Single Speed

Find a Dealer
01

Triple Butted Handmade Frame

02

Maintenance Free Bearing

03

Maintenance Free Bearing

04

CNC machined pedals

laptop base
mouse:@parallax(10)
radiate(primary)
hover:push.up(sm)
.tor-slider
.circle-md
.shadow-primary
float(1rem)
.shadow-intensity-xl
active:{fade.in scale.from(75)}
.bg-darken-xl
.btn-soft-primary
Effects icon Loops icon Components icon Utilities icon

Effects

Create interactive CSS transitions and effects with simple data-tor HTML attribute. No need to write any JavaScript or CSS. Use multiple triggers such as hover, inview, scroll, mouse or even sensor. You can combine them to create stunning interactions that reacts to user behavior

Loops

We've included several ready-to-use CSS animations that help you to animate the elements in a loop. This helps you to grab the user's attention or just create interesting animation on your website.

Components

TorusKit brings some new components that are missing in Bootstrap core. Also, it enhances some of the original Bootstrap ones

Utilities

With the included utilities, your workflow will be even faster. Thinks like background color opacity, shading, custom position, overlay, etc., will help you to code more effectively without the need for custom CSS

Interactions & Effects

Complete solution for responsive interactions and effects

Create interactive effects that responds to user behavior. Fine-tune any effect to perfectly fit any resolution thanks to Torus Kit responsive capabilities.

More
Components & Utilities

New and enhanced Bootstrap components and utilities

Torus Kit brings new components and utilities that makes workflow flawless. It also enhances some of the original Bootstrap components and utilities, too

More
HTML templates (Soon!)

Carefully crafted templates ready to kick-start your project

Choose from various ready-made HTML templates that fully make use of Torus Kit interaction capabilities.

More

Interactions made super easy

Torus Kit helps developers and designers to make CSS animations and effects effortless

Small icon - effects Discover Interactions

Change style on scroll

Scroll-linked effects are one of the biggest trend. Making them with Torus Kit is super easy

Apply styles while moving a mouse

Create mouse-based parallax effects, dynamic color changes, fade effects or change any available CSS property.

Change the style when rotating a device!

Yes, with the Torus Kit you can even create motion sensor-based effects that reacts to the rotation of your device.

Revealing effect with ease

Create beautiful, gradual reveal effects when element becomes visible into viewport

Build rich hover animations

Create multiple style changes, reveals and transforms on element hover

<!-- Scroll-based style changes -->

<!-- Responsive parallax -->
<div data-tor="scroll:@parallax(20 md::50)">...</div>

<!-- Opacity -->
<div data-tor="scroll:@opacity(0;1)">...</div>

<!-- Negative Parallax -->
<div data-tor="scroll:@parallax(-60)">...</div>

<!-- Scale with offset -->
<div data-tor="scroll:@T=scale(0;1, {offset: 100})">...</div>

<!-- Rotate with offset -->
<div data-tor="scroll:@T=rotate(180deg;0deg, {offset: 100})">...</div>

    
<!-- Mouse move-based style changes -->

<!-- TranslateY with sticky shadow -->
<div data-tor="mouseY:[@T=translateY(0rem; -2rem) @--tor-shadow-offset-down(0rem; 2rem), {method: self}]">...</div>

<!-- Rotate -->
<div data-tor="mouse:@T=rotate(0deg;180deg, {method: self})">...</div>

<!-- Scale -->
<div data-tor="mouse:@T=scale(0.5;1, {method: self})">...</div>

<!-- TranslateX -->
<div data-tor="mouseX:@parallax(10)">...</div>

<!-- Tilt -->
<div data-tor="mouse:@tilt(10)">...</div>

<!-- Color change -->
<div data-tor="mouse:@background-color(rgb(...93, 30, 241); rgb(...253, 150, 179))">...</div>

<!-- Border radius -->
<div data-tor="mouse:@border-radius(10%;50%, {method: self})">...</div>


    
<!-- Motion sensor-based style changes -->

<!-- Color change -->
<div data-tor="sensor:@background-color(rgb(...93, 30, 241); rgb(...253, 150, 179))">...</div>

<!-- Opacity -->
<div data-tor="sensor:@opacity(0.3; 0.6)">...</div>

<!-- Tilt -->
<div data-tor="sensor:@tilt(10)">...</div>

<!-- Scale with offset -->
<div data-tor="sensor:@T=scale(0.5; 1)">...</div>

<!-- Border radius -->
<div data-tor="sensor:@border-radius(10%; 50%)">...</div>


    
<!-- Reveal effects -->

<!-- Circle clip -->
<div data-tor="active:clip(circle) slow">...</div>

<!-- Gradual group scale up -->
<div data-tor-group="div => active:scale.from(0) delay(/+100ms/)">...</div>

<!-- Blur -->
<div data-tor=active:blur.from(xl) slowest quad">...</div>

<!-- Hidden content reveal -->
<div data-tor="active:reveal(up) exponential">...</div>

<!-- Scale in -->
<div data-tor="active:[scale.from(125) fade.in]">...</div>

<!-- Gradual group block reveal -->
<div data-tor-group="span => active:block.up delay(/+100ms/)">...</div>

<!-- Gradual group clip reveal -->
<div data-tor-group="span => active:clip.right delay(/+100ms/) wait(300ms)">...</div>

<!-- Gradual group fade in -->
<div data-tor-group="span => active:fade.in delay(/+100ms/) wait(600ms)">...</div>


    
<!-- Hover -->

<!-- Blurred image -->
<div data-tor="hover(p):[blur.to(md) scale.to(125%)]">...</div>

<!-- Lighten background color -->
<div data-tor="hover:bg-lighten(md)">...</div>

<!-- Darken background color -->
<div data-tor="hover:bg-darken(md)">...</div>

<!-- Background color opacity -->
<div data-tor="hover:bg-opacity(20%)">...</div>

<!-- Change the background and text color -->
<div data-tor="hover:[bg(dark) text(white)]">...</div>

<!-- Skewed clip reveal -->
<div data-tor="hover(p):clip(right, {skew: 2rem}) slow">...</div>

<!-- Push the element up and change the shadow -->
<div data-tor="hover:[push.up(sm) shadow(risen) shadow-offset.down(xs)]">...</div>

<!-- Flip card-->
<div data-tor="hover:rotateY.to(180deg)">...</div>
outline dots
21/10/2025
Air sneakers
Read more
sneakers
Design
Learn how we get 1000+ subscribers in two days
12.5.2025
26
woman
21/10/2025
7 tips when working as freelancer
Read more
dots
Color
Change
Find the best home for you
building
woman
08/11/2025
A room without books is like a body without a soul
Marcus Tullius Cicero
circle
dots
Color
Change
circle
Find the best home for you
building
woman
Circle reveal effect
01
Block Reveal Effect
02
Clip Reveal Effect
03
Fade Reveal Effect
outline dots
This is revealed content
Create hidden content reveal with simple code without writing any JS or CSS Get started
woman
Click the plus to read more
building building 2
Hover the image
Image blur and reveal
building
hover:bg-lighten(md)
hover:bg-darken(md)
hover:bg-opacity(20)
hover:bg(dark)
eye
Flip card
interior
This is a backside!

Grab the attention with loops

Animate the content with infinite loops to keep the user focused on important content

Small icon - loops Discover Loops

Circle

Jump

Swing

Move

Wobble

Spin

Blink

Pulse

<!-- Circle with custom value -->
<div data-tor-loop="circle(2rem)">...</div>

<!-- Jump with custom value -->
<div data-tor-loop="jump(2rem)">...</div>

<!-- Swing -->
<div data-tor-loop="swing">...</div>

<!-- Move -->
<div data-tor-loop="move.down">...</div>

<!-- Wobble vertical -->
<div data-tor-loop="wobble.v">...</div>

<!-- Spin -->
<div data-tor-loop="spin">...</div>

<!-- Blink -->
<div data-tor-loop="blink">...</div>

<!-- Pulse -->
<div data-tor-loop="pulse">...</div>

Components and Utilities for fast workflow

Torus Kit brings the new components and utilities with enhanced Bootstrap ones

Small icon - components Components
Small icon - utilities Interactions 
<!-- Custom placed caret -->
<div data-tor-caret="bottom start>...</div>

<!-- Animated spinner -->
<div class="spinner text-primary">...</div>

<!-- Shapes -->
<div class="circle p-7">...</div>

<!-- Torus Kit Slider -->
<div class="tor-slider">...</div>

<!-- Background color opacity -->
<div class="bg-opacity-10">...</div>

<!-- Spin -->
<div data-tor="spin">...</div>

<!-- Styled native scrollbars -->
<div class="scrollbar scrollbar-*">...</div>

<!-- Ribbons -->
<div class="ribbon ribbon-corner">...</div>
<div class="ribbon ribbon-bookmark">...</div>

<!-- Enhanced shadows -->
<div class="shadow-risen">...</div>
<div class="shadow-primary">...</div>
<div class="shadow-offset-down-md">...</div>

<!-- Overlay -->
<div class="overlay overlay-primary">...</div>
<div class="overlay-gradient">...</div>

<!-- Text opacity -->
<div class="text-opacity-*">...</div>
Hello! Interested now?
Caret
Spinners
woman
Shapes

Slider reveals
and transitions

Bootstrap slider preview image 1

Slider reveals
and transitions

Bootstrap slider preview image 2

Slider reveals
and transitions

Bootstrap slider preview image 3
Slider
10
20
30
40
50
60
Background opacity

Choose modal animation:

Modal animations
White scrollbar

Aenean viverra ex in laoreet malesuada. Suspendisse eleifend velit aliquet lacinia tristique. Aliquam tincidunt magna non urna rutrum, nec eleifend nibh sodales. Proin orci tellus, ultricies ac pulvinar in, finibus in nibh.

Dark scrollbar

Aenean viverra ex in laoreet malesuada. Suspendisse eleifend velit aliquet lacinia tristique. Aliquam tincidunt magna non urna rutrum, nec eleifend nibh sodales. Proin orci tellus, ultricies ac pulvinar in, finibus in nibh.

Light scrollbar

Aenean viverra ex in laoreet malesuada. Suspendisse eleifend velit aliquet lacinia tristique. Aliquam tincidunt magna non urna rutrum, nec eleifend nibh sodales. Proin orci tellus, ultricies ac pulvinar in, finibus in nibh.

Scrollbar colors
Sale!
New
Pure CSS ribbon image example
Chronomaster men’s Black Wristwatch
$185.99 $125.99
Ribbons
Risen Shadow
Colored Shadow
Shadow offset
Enhanced shadows
7 Tips when working as freelancer
Torus Kit overlay utility for Bootstrap 5
Easy to create
Full sized, colored or gradient overlay
Torus Kit overlay utility for Bootstrap 5
Overlay
.text-opacity-40 .text-opacity-60 .text-opacity-80
Text opacity

And much more!

Try Torus Kit
Torus components icon
New components

Torus Kit only ready made components

Bootstrap components icon
Enhanced Bootstrap components

We've enhanced some of the Bootstrap original components

Torus utilities icon
New utilities

Utilities that helps you to work faster

Bootstrap utilities icon
Enhanced Bootstrap utilities

Bootstrap utilities with some improvements

Ready to make something big?

Build breathtaking effects and interactions with simple code and enhance your Bootstrap project to higher level.

Get Started

Product

Resources

Support

Social

© 2021 Torus Kit. All rights reserved. hello@toruskit.com