SLIDEJAM

效果圖鑑

挑一個效果,跟 AI 說「第幾頁的哪裡用哪個」就好。點名字直接跳過去看,或點這裡讓全部效果一起動。

按鍵

放映、改字、標註

→下一步/下一頁
←上一頁
G總覽,也能「播放全部」
R重播這一頁
N講稿
F全螢幕
P講者視窗:講稿只在你的螢幕
E直接改字,⌘S存回檔案
A標註「這裡想要怎樣」,複製給 AI

進度條滑過去會看到那一頁的縮圖,點下去就跳過去。忘了按鍵?按 ? 或點左下角的小問號。

主題
預覽

主色是 這個顏色,第二強調是 這個。

深色區塊
226

theme

配色與風格

選一套主題,或直接調顏色;整份圖鑑會跟著變。調好按「複製這組設定」,貼進你簡報的 <style>,或存成一個主題檔。

跟 AI 說

「這份簡報用 warm 主題,主色換成 #2f6f4f」

<link rel="stylesheet" href="deck/themes/warm.css"> 主題檔在 deck/themes/,每個變數都有中文註解 任何一份簡報按 T 都能換
第一個
第二個
第三個
第四個
第五個
第六個

stagger

依序浮出

每一頁的東西照順序浮上來,最常用。按 R 重播。

跟 AI 說

「第 3 頁的三張卡片依序浮出」

data-i="1" … data-i="10"
好長一段介紹……
另一段介紹……
更多介紹……

解決什麼 一句話講完

誰在用 一句話講完

怎麼參與 一句話講完

step

按一下才出現

按 → 一次出現一組,全部出完才翻頁。也可以讓舊的東西在同一下消失(這頁就是)。

跟 AI 說

「第 24 頁先放三張卡,按一下卡片糊掉,換成三行重點逐行出現」

data-step="1" 按第一下出現 data-step-out="1" 按第一下消失
政府預算60%
假訊息防治45%
地方創生39%
防災37%
健康與醫療24%

bars

長條圖

進到這頁時,長條一起長出來。想強調的那幾條加 hot 會變成橘色。

跟 AI 說

「第 18 頁做 bars,預算 60%、假訊息 45%……,預算那條標橘色」

<div data-fx="bars"> <div class="bar hot" data-v="60"> <span>政府預算</span><em>60%</em>
1,165
部影片
48%
有寫簡介

count

數字跳動

從 0 數到寫在裡面的數字。逗號、百分比、小數點都照原樣保留。

跟 AI 說

「第 35 頁的 1,165 用 count 跳上去」

<div data-fx="count">1,165</div> data-ms="1400" 跳多久 data-delay="0.3" 等多久才開始

在 Google 搜尋

台灣有哪些公民科技專案?

type

打字

一個字一個字打出來,適合搜尋框、對話、提問。

跟 AI 說

「第 12 頁的搜尋字用 type 打出來」

data-fx="type" data-ms="55" 每個字幾毫秒

想參與的人,最常卡在不知道從哪裡開始。

mark

螢光筆

一段文字裡,把重點畫上螢光筆。

跟 AI 說

「第 9 頁的『不知道從哪裡開始』用 mark 畫起來」

<b data-fx="mark">重點</b>

pan

長截圖捲動

整頁的長截圖放進框裡,慢慢往下捲再捲回來。捲多遠會自己算。

跟 AI 說

「第 10 頁右邊放議題頁的長截圖,用 pan」

<div class="pan" data-fx="pan" style="height:640px"> <img src="tall.png"> data-ms="7000" 捲一趟多久

zoom

推近

慢慢推近截圖上的一點,再拉回來。加 data-once 就只推一次。

跟 AI 說

「第 25 頁的截圖推近到左上的專案名稱」
(用 A 標註點一下位置最準)

data-at="20% 40%" 推向哪一點 data-scale="2" 放大幾倍

cycle

輪播

幾張圖輪流淡入淡出,適合「同一個東西的幾個樣子」。

跟 AI 說

「第 6 頁把四個預算網站的截圖做成 cycle」

<div data-fx="cycle" data-ms="3000"> <img><img><img>

clickpath

游標示範

游標在幾張截圖上移動、點擊、換頁,示範「要點哪裡才找得到」。會一直循環。

跟 AI 說

「第 26 頁做 clickpath:先點右上的『討論』,再點『過去的討論』」

move X Y(百分比)· click frame N(換第幾張)· wait 毫秒
資料庫Airtable
API每天同步
網站civictech.tw
使用者看到錯字
建議修改表單
審核揪松團

orbit

循環流程

幾個步驟排成一圈,一個點沿著圈走,走到哪個就亮哪個。適合「會回到起點」的流程。

跟 AI 說

「第 31 頁用 orbit 畫資料流:資料庫 → API → 網站 → 使用者 → 建議修改 → 審核」

<div class="orbit" data-fx="orbit"> <div>資料庫<small>…</small></div> …
找得到
看得懂
進得去
拿得走
放得回
留得住

assemble

飛進來組合

一組卡片從四散的位置飛進來,拼成格子。適合「這些合起來就是解法」。

跟 AI 說

「第 10 頁的 bento 用 assemble 飛進來」

data-fx="assemble" data-stagger="0.12"
照議題找專案17 個議題,挑你關心的那一個
資料庫裡台灣公民科技專案
226個專案
17 個議題照大家最想先看的排
手機也能用不用下載 App
深色模式
隨機推薦不知道從哪開始,就抽一個
隨機推一個LostSAR 無人機

用無人機與 beacon 協助登山搜救找人

隨機推一個CC0 繁體中文句庫

蒐集無版權限制的繁體中文句子

隨機推一個秒懂災害潛勢

從地名與文化素材認識災害潛勢

許願池想做但沒人做的事
公車到站語音提醒
開放資料 API免 token
curl data.civictech.tw/v0/tech/projects.json
{
"label": "公民科技專案資料庫",
"recordCount": 230,

bento

功能格狀總覽

格子從離它最近的畫面邊飛進來,卡位時微微回彈,整面再慢慢拉近。每格裡面放別的效果:pan、slot、pop、compare、stack、type、terminal。

跟 AI 說

「做一頁 bento:8 格,照議題找、226 個專案、手機版、深色模式、隨機推薦、許願池、API」

<div class="bento" data-fx="bento"> <div class="tile w2">(兩格寬) <div class="head"><b>標題</b><span>… <div class="tile h2 dark">(兩格高)
政府預算、決算與標案假訊息與詐騙防治地方發展與地方創生防災與災害應變法律、立法歷程居住與租屋環境汙染與公害生態與生物多樣性健康與醫療交通與道路安全水環境(河川、海洋)土地使用與違章建築學習、教育與母語選舉、監督與公共參與能源、農業與氣候工作與生活權益公民科技社群自己的工具

pop

依序彈出

一組小東西一個接一個「啵」地彈出來,最後微微回彈。適合標籤、色塊、logo 牆。按 R 重播看比較清楚。

跟 AI 說

「17 個議題的標籤用 pop 一個個彈出來」

<div data-fx="pop"> <span>…</span>… data-stagger="0.05" 間隔幾秒

compare

左右對照

兩張圖疊在一起,一條線左右來回掃:線左邊是第一張,右邊是第二張。適合淺色/深色、改版前後。

跟 AI 說

「首頁淺色和深色用 compare 對照」

<div class="compare" data-fx="compare"> <img 左><img 右> data-ms="3200" 掃一趟多久
隨機推一個LostSAR 無人機

用無人機與 beacon 協助登山搜救找人

隨機推一個CC0 繁體中文句庫

蒐集無版權限制的繁體中文句子

隨機推一個秒懂災害潛勢

從地名與文化素材認識災害潛勢

stack

卡片疊

一疊卡片,最上面那張每隔一陣子換到最底下,下一張浮上來。適合「隨機抽一個」「還有很多」。

跟 AI 說

「隨機推薦做成 stack,放三張專案卡」

<div class="stack" data-fx="stack"> <div class="card">…</div>… data-ms="1600" 多久換一張

spot

聚光燈

截圖其他地方變暗,只亮一塊。有好幾塊的話,每按一下 → 移到下一塊。

跟 AI 說

「第 25 頁的截圖用 spot,依序亮標題、簡介、右邊的連結」
(按 A 拖拉框出範圍最準)

data-rects="x y 寬 高, …"(百分比)

morph

頁面重組

用真的網站做出來:游標點一張卡片,卡片長成整頁,標題飛到新位置,其他內容浮上來。

跟 AI 說

「做一段 morph:在議題頁點『中央政府預算視覺化』,變成它的專案頁。標題、簡介要飛過去」

npm run morph -- config.mjs <div class="morph" data-fx="morph" data-src="media/morph-x">

map

地圖

真的地圖,點位一個個掉下來;每按一下 →,飛到下一個地點。加 data-auto 就自己飛。需要網路。

跟 AI 說

「第 5 頁放台北的地圖,插三個點,按一下飛到台北車站、再按飛到 101」

data-pins="緯度 經度 名字; …" data-tour="緯度 經度 縮放; …"

live

真網站

把網站直接放進投影片,可以現場點。用手機的寬度畫再縮小,就是手機上的樣子。需要網路。

跟 AI 說

「第 8 頁放 misheng.app 的手機版,可以現場操作」

<div class="live" data-fx="live" data-src="https://…" data-w="390" data-h="844">
civictech.tw

frames

瀏覽器/手機框

截圖、影片、真網站外面套一個框,一看就知道是網頁還是手機。

跟 AI 說

「第 7 頁的截圖套瀏覽器框,網址寫 civictech.tw」

<div class="browser"><span class="url">… <div class="phone"><img>
▶ 整頁影片

video

影片轉場

一整頁只放一支影片,翻到就自動播放。適合段落之間的轉場。

跟 AI 說

「第 15 頁放 06-explode.mp4 當轉場」

<section class="slide video"> <video src="media/x.mp4" muted playsinline>

想改變的事,

已經有人在做

letters

逐字浮現

標題一個字一個字從模糊裡浮上來。適合開場、段落標題。

跟 AI 說

「封面標題用 letters」

<h1 data-fx="letters"> data-stagger="0.05" 字跟字的間隔

在這裡,你可以
讀別人的經驗|串接資料|找到夥伴|開始一個專案

rotate

換詞輪播

一句話裡的某個詞一直換,講「可以做很多事」很好用。

跟 AI 說

「『你可以__』那句用 rotate,輪流換成讀經驗、串資料、找夥伴」

<span data-fx="rotate">詞一|詞二|詞三</span>

17 個議題

226 個專案

flap

翻牌看板

像車站的翻牌看板,每個字先亂翻幾下再停住。適合數字、名單。

跟 AI 說

「第 3 頁的兩行數字用 flap 翻出來」

<p data-fx="flap">17 個議題</p>
226
個專案
1,165
部影片

slot

數字滾輪

每一位數像里程表一樣各自滾動再停下。跟 count 比,更有「機器在跑」的感覺。

跟 AI 說

「226 用 slot 滾出來」

<div class="n" data-fx="slot">226</div>

civictech.tw

particles

粒子聚字

滿畫面的點飄過來,聚成一行字。適合結尾的網址、品牌名。只支援一行字。

跟 AI 說

「最後一頁的網址用 particles 聚出來」

<h1 data-fx="particles">civictech.tw</h1>

公民科技

textmask

文字遮罩

超大的字裡面填一張圖,圖慢慢移動。適合當段落的封面。

跟 AI 說

「段落頁的『公民科技』用 textmask,裡面放首頁截圖」

<h1 data-fx="textmask" data-img="media/x.png">公民科技</h1>

tilt

3D 斜放

截圖斜躺著再轉正(左),或左右輕輕轉(右)。data-mode="hold" 會一直斜著慢慢飄。

跟 AI 說

「議題頁截圖用 tilt 斜躺進來」

data-fx="tilt" data-mode="settle|sway|hold"

explode

拆層

一張卡片拆成好幾層往上浮,每層拉一條線說明它是什麼。適合解釋「這個設計由哪些部分組成」。

跟 AI 說

「專案卡用 explode 拆成名稱、介紹、連結三層」

<div class="explode" data-fx="explode"> <div>底</div> <div data-label="名稱">…

每個專案

都有自己的一頁

parallax

景深

前中後幾層,越前面動得越多,滑鼠移動時也會跟著。讓靜態截圖有空間感。

跟 AI 說

「首頁截圖當背景,前面浮兩張卡,用 parallax」

<div class="parallax" data-fx="parallax"> <img data-depth="0.2"> <div data-depth="1">…

dive

鑽進去

往截圖的某一點一直推近,推到底就變成下一頁。加 data-on="step" 就等你按 → 才鑽。

跟 AI 說

「從議題頁鑽進第一張卡,變成專案頁」

<div class="dive" data-fx="dive" data-at="21% 47%"> <img 前><img 後>

wipe

擦過去

一條色帶斜斜掃過,後面露出第二張。適合改版前後、淺色深色對比。

跟 AI 說

「首頁淺色版用 wipe 擦成深色版」

<div class="wipe" data-fx="wipe"> <img 前><img 後>

專案名稱和一句話介紹

它解決什麼、怎麼運作

想修改資料,從這裡建議

hotspots

熱點導覽

截圖上幾個會跳動的點,每按一下 → 打開下一個說明。加 data-auto 就自己輪流。

跟 AI 說

「專案頁截圖加三個 hotspots:名稱、運作方式、建議修改」

<div class="hotspots" data-fx="hotspots"> <img> <p data-at="22 21">說明</p>
  1. 挑一個議題17 個議題,從關心的開始
  2. 看做過的人怎麼做每個專案一頁,一句話講完
  3. 找到人,一起做討論區、聯絡方式都在

story

步驟配畫面

左邊步驟、右邊畫面,亮到哪一步就換哪一張。自動輪流,或 data-on="step" 按一下換一步。

跟 AI 說

「做 story:三個步驟配三張手機截圖」

<div class="story" data-fx="story"> <ol><li>…</ol> <div data-frames><img>…

有沒有網站整理台灣的公民科技專案?

有!每個專案都有自己的網址

太好了,我轉給我們班

chat

聊天對話

訊息一則一則跳出來,對方會先「打字中…」。適合講「怎麼被分享出去」。

跟 AI 說

「做一段 chat:朋友問、我回一個連結」

<div class="chat" data-fx="chat"> <p>對方</p><p class="me">我</p> <p class="me link"><b>網址</b>…
curl https://data.civictech.tw/v0/tech/projects.json
{
"version": "v0",
"dataset": {
"slug": "tech",
"label": "公民科技專案資料庫"
},
"recordCount": 230,
…
}

terminal

終端機

指令自己打出來,按下去之後回應一行一行印出。適合講 API、開放資料。

跟 AI 說

「做 terminal:curl 我們的 API,印出前兩筆」

<div class="terminal" data-fx="terminal"> <div class="cmd">指令</div> <div>輸出</div>…
一鍵開大松中央政府預算視覺化選前大補帖高雄氣爆碳匯城鄉CC0 繁體中文句庫資料申請小幫手disinfo公務人員出國考察網Think Tank Info公民即時報政治承諾追蹤網阿龜微氣候Wikidata福利請聽國家寶藏LostSAR 無人機騎樓抓漏政府公開通訊錄台灣路更平HackingMap國會大代誌享食台灣議見零時差HackStory秒懂災害潛勢寵物需要我立委投票指南Vaxx.tw零時空汙觀測網來個判決書吧臺灣好植地美國國會台灣觀測站國會調查兵團血庫資訊里伯 LINEbot台灣 l10n 共筆GoodJob 職場透明化ChhoeTaigiDisfactory鄉民關心你金流百科農業災損幾多錢零時小學校公民記者證產生器g0v 公報開源出版割闌尾計畫司法陽光網HackFoldr公民科學計畫蒐集新聞小幫手政治獻金數位化你被服貿了嗎?CoTeach臺灣黑熊通報無麩質安全網萌典Cofacts 真的假的vTaiwan

tunnel

名稱隧道

一大串名字貼在隧道牆上往你衝過來。講「有這麼多」的時候很有感。

跟 AI 說

「把全部專案名稱做成 tunnel,上面疊一句『226 個專案』」

<div class="tunnel" data-fx="tunnel"> <span>名字</span>…
政府預算中央政府預算視覺化公務人員出國考察網標案資料瀏覽總預算案審查監督平台台電睦鄰金流大解析預算視覺化產生器貪汙查詢網站OpenBudget預算查詢
假訊息防治disinfoCofactsLee-Su-Threads新聞小幫手收款人帳戶安全守護站詐騙情境蒐集查無此人
防災LostSAR秒懂災害潛勢農業災損幾多錢BifrostiCanHelpNCDR 災情通報高雄氣爆太魯閣號事故八仙塵爆物資捐贈防災地圖避難所
法律與立法司法陽光網vTaiwan開放立法院LegislatureAI憲庭加好友法律偵探憲法急診室國會大代誌國會調查兵團你被服貿了嗎立委投票指南來個判決書吧
生態寵物需要我臺灣好植地臺灣黑熊通報Animalia Live植物辨識圖鑑救救食蛇龜認識植物
環境汙染OPEN 集團空污曝露路徑零時空汙觀測網
居住開放租屋資料開放易樓網Rentea
地方創生里伯 LINEbotReSchoolCollage

network

議題星團

每個議題是一顆星,專案是圍著它的小點,整團在 3D 裡慢慢轉。看得出哪裡多、哪裡少。

跟 AI 說

「用 network 畫議題和專案的星團」

<div class="network" data-fx="network"> <div><b>議題</b> <span>專案</span>…
84/ 226
199/ 226

ring

圓環進度

一圈環慢慢填到比例。裡面的數字可以再加 count 一起跳。

跟 AI 說

「226 個裡有 84 個寫了簡介,用 ring 畫」

<div class="ring" data-fx="ring" data-v="84" data-max="226"> <b>84</b><span>說明</span>
找得到

兩步就到每一個專案

看得懂

四行讀完一個專案

進得去

討論在哪,一鍵就到

拿得走

開放 API

放得回

建議修改

feature

輪流當主角

一組格子輪流有一格變大,其他格子讓位。適合一次介紹好幾個功能。

跟 AI 說

「五個解法做成 feature,每 3 秒換一個變大」

<div class="feature" data-fx="feature"> <div class="card">…
一鍵開大松中央政府預算視覺化選前大補帖高雄氣爆碳匯城鄉CC0 繁體中文句庫資料申請小幫手disinfo公務人員出國考察網Think Tank Info公民即時報政治承諾追蹤網阿龜微氣候Wikidata福利請聽國家寶藏LostSAR 無人機騎樓抓漏政府公開通訊錄台灣路更平HackingMap國會大代誌享食台灣議見零時差HackStory秒懂災害潛勢寵物需要我立委投票指南Vaxx.tw零時空汙觀測網來個判決書吧臺灣好植地美國國會台灣觀測站國會調查兵團血庫資訊里伯 LINEbot台灣 l10n 共筆GoodJob 職場透明化ChhoeTaigiDisfactory鄉民關心你金流百科農業災損幾多錢零時小學校公民記者證產生器g0v 公報開源出版割闌尾計畫司法陽光網HackFoldr公民科學計畫蒐集新聞小幫手政治獻金數位化你被服貿了嗎?CoTeach臺灣黑熊通報無麩質安全網萌典Cofacts 真的假的vTaiwan

swarm

蜂群飛入

一大堆小東西從畫面深處衝出來,排成整齊的一片。跟 assemble 比,適合「很多很多個」。

跟 AI 說

「全部專案名稱用 swarm 飛進來」

<div class="swarm" data-fx="swarm"> <span>名字</span>…

civictech.tw

collapse

收成一個網址

畫面上的東西全部縮進中間,最後只剩一行字。適合結尾。

跟 AI 說

「最後一頁把六張截圖 collapse 成網址」

<div class="collapse" data-fx="collapse"> …(會縮掉的東西) <div data-end>網址</div>

devices

多裝置

桌機、平板、手機排在一起,一看就知道「哪裡都能用」。桌機也可以換成 laptop(筆電)。

跟 AI 說

「放一頁 devices,三種裝置的截圖」

<div class="devices"> <div class="monitor"><img> <div class="tablet"><img> <div class="phone"><img>