Hanabi

002

「その瞬間」を祝祭に変える、高機能カウントダウン・コンポーネント

Auto rickshaw speeding through a blurred cityscape
Auto rickshaw speeding through a blurred cityscape

Hanabi は指定した時刻に達した瞬間に鮮やかなデジタル花火が打ち上がる、Framer専用のインタラクティブ・テンプレートです。 Canvas APIを用いた本格的なパーティクル・シミュレーションにより、キャンペーンの開始やイベントの幕開けをドラマチックに演出します。

主な特徴 (Key Features)


  • 物理演算によるリアルな花火 重力(Gravity)や空気抵抗(Drag)を計算した高度なパーティクル・アニメーションを搭載。打ち上げパワーや拡散範囲まで、Framerの右パネルから細かく調整可能です。


  • 柔軟な日時設定 カレンダー選択に加え、時・分・秒を個別のスライダーで指定可能。ローンチの「秒単位」のタイミングを逃しません。


  • 完全なデザイン自由度 日・時・分・秒の各ユニットごとに、フォント、カラー、ラベル、サイズを個別にカスタマイズできます。


  • タイムアップ演出 カウント終了後には、花火と共に任意のメッセージ(例:「HAPPY NEW YEAR」「NOW OPEN」)を表示。お祝いの雰囲気を最大化します。


  • レスポンシブ・レイアウト 表示形式を「水平(Horizontal)」と「垂直(Vertical)」から切り替え可能。デバイスの画面幅に合わせた最適な配置が可能です。


カスタマイズ可能なプロパティ (Property Controls)

Framerのプロパティパネルから、コードを触らずに以下の設定が可能です:

カテゴリ

設定可能な項目

Target Time

目標日付、時(0-23)、分(0-59)、秒(0-59)

Layout

水平/垂直配置、ユニット間のギャップ調整

Typography

各数値・ラベルのフォント、サイズ、カラー設定

Fireworks

打ち上げ頻度、拡散力、重力、空気抵抗、花火の色(複数指定可)

Message

終了後に表示されるテキスト、フォントサイズ、カラー

技術仕様 (Technical Specifications)

  • 軽量設計: Canvas APIを使用しているため、大量のパーティクルを表示してもブラウザへの負荷が抑えられています。

  • 高解像度対応: devicePixelRatioを自動取得し、Retinaディスプレイでも花火がぼやけることなく鮮明に描画されます。

  • スマート・レンダリング: フレーム内での静止画プレビュー(Static Renderer)にも対応。編集作業を妨げません。

活用アイデア

  • ECサイト: セール開始のカウントダウン → 終了と同時に「SALE START!」の文字と花火。

  • イベント: ウェビナー開始までの待機画面として。

  • ティザーサイト: 新機能公開や、アーティストの新曲解禁の瞬間に。

Details

Updated

---

Views

Pages

  • View All Showcase.