Widget spinner

index.pug

#title Expands when you hover over it

mixin leaf(link, image, title)
  .child
    a.leaf(href=link, target="_blank")
      img(src=image, alt=title)
      .glass-holder
        .counterspin
          .glass

.flower
  .inner
    .spinner
      +leaf('https://fb.me/tknomad', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/fb.svg', 'Facebook')
      +leaf('https://twitter.com/tknomad', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/bird.svg', 'Twitter')
      +leaf('http://www.flickr.com/photos/the-specious', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/photos.svg', 'Flickr')
      +leaf('https://github.com/specious', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/octocat.svg', 'GitHub')
      +leaf('https://codepen.io/tknomad', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/codepen.svg', 'CodePen')
    .cover

script.js

// That's right, there's no JavaScript ッ

style.stylus

//
// Variables
//

count = 5
diameter = 120px
distance = 1.2 // 1 = flush
tumbles = 6
swirl = 720deg // 0 = first leaf at the top; goes clockwise
time = 3.2s
spincycle = 45s
colors = #3535e0, red, #00bd00, yellow, #ebe8e8

//
// Automatic
//

dAngle = 360 / count
grow = 1 + (2 * distance)

//
// Glass cover
//

.glass
  background-image radial-gradient(circle closest-side, rgba(38, 38, 38, 0.2), rgba(0, 0, 0, 0.63))
  background-size 100% 100%
  border-radius 50%
  position relative
.glass::before
  position absolute
  width 56%
  height 26%
  top 4%
  left 22%
  border-radius 50%
  background-image linear-gradient(to bottom, rgba(207, 207, 207, 0.23), rgba(30, 30, 30, 0.06))
  content ''
.glass::after
  position absolute
  width 38%
  height 19%
  bottom 3%
  left 31%
  border-radius 50%
  background-image linear-gradient(to bottom, rgba(93, 93, 93, 0.1), rgba(0, 0, 0, 0.18))
  content ''

//
// Interactive spinner
//

.flower
  width diameter
  height diameter
  border-radius 50%
  cursor pointer
  position relative
  .spinner, .inner, .counterspin
    height 100%
  .spinner
    animation spin spincycle infinite linear
  .counterspin
    animation counter-spin spincycle infinite linear
  .cover
    width diameter
    height diameter
    background-image url(https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/portrait.jpg)
    background-size 100%
    border-radius 50%
    box-shadow \
      0 0 2px 4px #d1d1d1, \
      0 0 20px 4px black
    position absolute
    top 0
  a
    display block
  .child
    width diameter
    height diameter
    border-radius 50%
    position absolute
    top 0
    .leaf
      height 100%
      border-radius 50%
      visibility hidden
      transition transform time ease-in-out
      img
        width 64px
        height 64px
        left 28px
        top 28px
        position absolute
        border none
    for c, i in colors
      &:nth-child({i+1})
        rot = (dAngle * i - 90)
        transform rotate((rot)deg)
        .leaf
          background-color c
          background-size 100%
          opacity 0.94
          transition transform time ease-in-out, box-shadow 0.16s ease-in-out, visibility time linear
          .glass-holder
            height 100%
            transform rotate(-(rot)deg)
  .glass
    height 100%
    transition transform time ease-in-out
  &:hover
    transform scale(grow) // zoom click area
    .inner
      transform scale(1 / grow) // but do not zoom internal elements
    .leaf
      // Expand
      visibility visible
      transform rotate(swirl) translateX(diameter * distance) rotate((tumbles * 360 + 90)deg)
      &:hover
        box-shadow 0 0 34px rgba(211, 217, 255, 1), 0 0 0 1px black, inset 0 1px 0 rgba(255, 255, 255, 0.2)
      .glass
        // Keep the glass cover stationary
        transform rotate((-1 * (swirl + tumbles * 360 + 90))deg)
@keyframes spin
  to
    transform rotate(1turn)
@keyframes counter-spin
  to
    transform rotate(-1turn)

//
// Presentation
//

html
  height 100%
  overflow hidden
body
  background-color #02102c
  background-image linear-gradient(135deg, #000080 10%, #000 90%)
  background-size cover
  overflow visible
  display flex
  align-items center
  justify-content center
  height 100%
a
  outline 0
#title
  color #ddd
  font-size 18px
  position fixed
  bottom 10px
  left 14px

widget-spinner.markdown

Widget spinner

Circular menu. Hover over the button and see icon bubbles swirl out and orbit the main piece. On mouse out, they swirl back in. Excellent way to implement a list of links.

Be aware that touch browsers may not implement a :hover event.

A Pen by Ildar Sagdejev on CodePen.

License.