先日調べた通り、Rails + Materializeがよさそうなのでウェブページを作ってみます。
CSSのデザイン部分はMaterializeがやってくれるのでやらないといけないパートはJSの部分とサーバーサイドの入出力だけです。
JavaScriptもMaterializeがJqueryを使っているのでそのまま慣れ親しんだJqueryを使い続けます。
今回AJAX通信でのサーバー連携は外してアニメーションのデモだけ作成します。

[GettingStarted]
(http://materializecss.com/getting-started.html)
のサイトにサンプルが豊富に揃っているので一貫してHTMLのコピペのみでいけそう。
覚える事はあまり無いです。色とか線の太さとかデザイナーチックな事は気にしなくていいので自分好みです。

Rails用のGem利用方法
こちらも書いてある通りにやれば動きましたので安定感→高の印象。
ただ、CDNを利用する方法もあるので、実運用している所に組み込むのなら、下記の方法でいいかなと思います。

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

1. セットアップ

端末	バージョン
Ruby	ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-linux]
Rails	Rails 5.0.0
Materialize	sass-3.4.22

1.1 Gemfileに追記

Gemfile

gem 'materialize-sass'

1.2 モジュールインストールとコントローラ作成

[admin@localhost my1stRails]$ bundle install --path vendor/bundle
[admin@localhost my1stRails]$ rails generate controller matelpage

1.3 matelpage.scssを編集

my1stRails/app/assets/stylesheets/matelpage.scss

@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';

テーマカラーを青くします。デフォルトは赤っぽい色です。

1.4 application.jsを編集

app/assets/javascripts/application.js

//= require jquery
//= require materialize-sprockets

読み込みたいJSを指定するそうです。
こちらの説明が分かりやすいです。

1.5 routers.ebに追記

get 'matelpage/index' => 'matelpage#index'

1.6 matelpage_controller.rbに追記

my1stRails/app/controllers/matelpage_controller.rb

class MatelpageController < ApplicationController
  def index

  end
end

1.7 index.html.erbに追記

この中のコードを適当にコピペ！
でとりあえず立派なページができます。

my1stRails/app/views/matelpage/index.html


  <div class="collection">
    <a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
    <a href="#!" class="collection-item">Alan<span class="new badge">4</span></a>
    <a href="#!" class="collection-item">Alan</a>
    <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>
  </div>

2. 作ってみよう

とりあえず、コンポーネントの中のカードが気に入ったのでこれで遊びたいと思います。
時計をクリックするとカードが時計回りに回るだけです。
レイアウト崩れなど起きずとても楽に実装できました。
元の画像が壁紙サイズなので最初の読み込みだけ遅いです。

デモをみる

2.1 作り方

アニメーションは素直にJQueryの.animate()を使っています。
レイアウトは、
　　第一階層: 親DIV
　　 └第二階層1: キャンバス(canvas)
　　 └第二階層2: Cardを子要素として入れる用のDIV
となっています。
第二階層1,2が完全に重なるようにレイアウトしておきます。

1.上のような感じでキャンバスに最初に楕円を書いて座標を配列にとっておきます。
　位置決めだけしたら、canvasは消していいです。
2.どの角度の時にCardをプロットするか決めます。
3.CardのオブジェクトをCloneして第二階層2にどんどん入れていきます。
4.3で配列にオブジェクトをとっておいて、ボタンがクリックされたら回します。

2.2 動作確認

端末	ブラウザ	バージョン
MAC	Chrome	バージョン 52.0.2743.116 (64-bit)
MAC	Safari	バージョン 9.1.2
MAC	FireFox	バージョン 47.0.1
WIN	Chrome	バージョン 52.0.2743.116 (64-bit)
WIN	IE	バージョン 11.545.10586.0

全部問題無いです

リファクタリングはどうやってやるかちょっと悩んでます。
JSのキレイなコードをいかに書くかはちょっと課題ですね。
http://qiita.com/k4zzk/items/11e5dbd53cb93edb8b4d