我們剛剛發布了 Studio — 一個美觀的全新網站範本，我們在過去幾個月為 Tailwind UI 開發的。
我們使用 Next.js、MDX，當然還有 Tailwind CSS 建構它，並且這是我們第一個使用新的 Next.js App Router 發佈的範本。
設計一個網站範本是一個有趣的專案，因為創意公司通常會使用自己的網站來展示一些非常炫目、客製化的想法，當目標是要展示你的公司能做什麼時，使用範本會讓人感到有點奇怪。
因此，我們嘗試以兩個目標來處理這個範本，以使其對人們真正有用
- 教導人們如何做出在炫目網站上看到的一些酷炫效果 — 我一直認為我們的範本不僅僅是範本，也是寶貴的教育資源，因此我們想利用這個範本來展示如何建構你在這些網站上看到許多酷炫的互動和動畫細節。
- 為不銷售設計的公司設計 — 有很多公司只專注於工程工作，而這些公司在設計方面往往難以脫穎而出。我們試著以一種不依賴大量設計作品截圖的方式設計這個範本，使其看起來很棒，這樣專注於程式碼的公司可以將其用作自己網站的起點。
我認為我們所做出的成果達成了這兩個目標，我對它的結果感到非常自豪。
請像往常一樣查看 即時預覽 以獲得完整的體驗 — 這個範本中有很多很酷的細節，你必須在瀏覽器中看到才能真正欣賞它們。
令人愉悅的動畫
網站的一個潛規則是它們必須很炫。我們沒有完全取代滑鼠游標或使用 WebGL 渲染整個網站，但我們盡可能地尋找機會，以優雅的方式引入動畫和互動。
例如，我們圍繞 Framer Motion 的一些功能建構了一個輕量級的宣告式元件 API，以便輕鬆實現滾動觸發的進入動畫
這些類型動畫的創作體驗非常棒 — 只需用 FadeIn 或 FadeInStagger 元件包住你想要淡入的內容，你就準備好了
function Clients() { return ( <div className="mt-24 rounded-4xl bg-neutral-950 py-20 sm:mt-32 sm:py-32 lg:mt-56"> <Container> <FadeIn className="flex items-center gap-x-8"> <h2 className="font-display text-center text-sm font-semibold tracking-wider text-white sm:text-left"> We’ve worked with hundreds of amazing people </h2> <div className="h-px flex-auto bg-neutral-800" /> </FadeIn> <FadeInStagger faster> <ul role="list" className="mt-10 grid grid-cols-2 gap-x-8 gap-y-10 lg:grid-cols-4"> {clients.map(([client, logo]) => ( <li key={client}> <FadeIn> <Image src={logo} alt={client} unoptimized /> </FadeIn> </li> ))} </ul> </FadeInStagger> </Container> </div> );}我們還在標誌中添加了這個漂亮的小動畫，當滑鼠懸停在標誌上時，標誌會填充純色
這個小細節看起來很小，但有趣的是，如果沒有客戶端導航，你實際上無法做到，因為當點擊標誌回到首頁時，動畫會重新運行。使用像 Next.js 這樣的框架，我們能夠在懸停時保持標誌填充狀態，即使在 URL 更改時也是如此，這感覺好多了。
選單抽屜動畫也變得非常好，當它打開時，會將整個頁面向下推
如果你仔細看，標誌和按鈕也不只是單純地改變顏色 — 它實際上是由正在下滑的圖層的位置精確驅動的，並且當圖層的邊緣與標誌相交時，標誌實際上會同時呈現部分白色和部分黑色。
我非常喜歡的另一個細節是我們為案例研究頁面上的圖像設計的互動
我們希望整個網站看起來是黑白的，但始終顯示黑白圖像感覺不太對。因此，我們設計了這種處理方式，圖像開始時是黑白的，當圖像在滾動時接近螢幕中心時，飽和度會逐漸動畫呈現出來。我們也會在滑鼠懸停時顯示完整彩色圖像。
我們也小心地嘗試以一種考慮到前庭運動障礙人士的方式實現所有這些動畫，他們對這些大型動畫很敏感。使用 Framer Motion 的 useReducedMotion Hook 和 Tailwind 中的 motion-safe 變體，我們有條件地禁用導航選單動畫，並將滾動驅動的進入動畫限制為僅不透明度，以便螢幕上的內容不會移動。
以開發人員為中心的案例研究和部落格工作流程
Studio 支援 案例研究 和 部落格文章，正如你可能猜到的，如果你玩過我們的其他任何範本，我們會藉此機會將 MDX 整合到專案中。
這是一個基本案例研究的範例 — 主要以 Markdown 編寫，其中包含一些常見的中繼資料，並支援混合在內容中的自訂元件
import logo from "@/images/clients/phobia/logomark-dark.svg";import imageHero from "./hero.jpg";import imageJennyWilson from "./jenny-wilson.jpeg";export const caseStudy = { client: "Phobia", title: "Overcome your fears, find your match", description: "Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.", summary: [ "Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.", "We worked with Phobia to develop a new onboarding flow. A user is shown pictures of common phobias and we use the microphone to detect which ones make them scream, feeding the results into the matching algorithm.", ], logo, image: { src: imageHero }, date: "2022-06", service: "App development", testimonial: { author: { name: "Jenny Wilson", role: "CPO of Phobia" }, content: "The team at Studio went above and beyond with our onboarding, even finding a way to access the user’s microphone without triggering one of those annoying permission dialogs.", },};export const metadata = { title: `${caseStudy.client} Case Study`, description: caseStudy.description,};## OverviewNoticing incredibly high churn, the team at Phobia came to the conclusion that, instead of having afundamentally flawed business idea, they needed to improve their onboarding process.Previously users selected their phobias manually but this led to some users selecting things theyweren’t actually afraid of to increase their matches.To combat this, we developed a system that displays a slideshow of common phobias duringonboarding. We then use malware to surreptitiously access their microphone and detect when theyhave audible reactions. We measure the pitch, volume and duration of their screams and feed thatinformation to the matching algorithm.The next phase is a VR version of the onboarding flow where users are subjected to a series ofscenarios that will determine their fears. We are currently developing the first scenario, workingtitle: “Jumping out of a plane full of spiders”.## What we did<TagList> <TagListItem>Android</TagListItem> <TagListItem>iOS</TagListItem> <TagListItem>Malware</TagListItem> <TagListItem>VR</TagListItem></TagList><Blockquote author={{ name: "Jenny Wilson", role: "CPO of Phobia" }} image={{ src: imageJennyWilson }}> The team at Studio went above and beyond with our onboarding, even finding a way to access the user’s microphone without triggering one of those annoying permission dialogs.</Blockquote><StatList> <StatListItem value="20%" label="Churn rate" /> <StatListItem value="5x" label="Uninstalls" /> <StatListItem value="2.3" label="App store rating" /> <StatListItem value="8" label="Pending lawsuits" /></StatList>這個範本的所有排版樣式都是完全自訂的，這次我們採用了與過去不同的方法 — 我們沒有編寫一堆複雜的 CSS 來避免我們的排版樣式與 MDX 中的任何自訂元件發生衝突，而是建立了一個名為 remark-rehype-wrap 的小型 remark 外掛，可以將 Markdown 內容區塊包裹在包裝器元素中。
這樣，我們可以將任何原始的 Markdown 內容用 typography 類別包住，但確保文件中任何自訂元件只是沒有被包住，而不是嘗試以一種忽略樹狀結構中那些部分的方式來編寫 CSS。
兩種方法都完全有效，但嘗試新想法並看看你能學到什麼總是很有趣。我也很好奇基於 CSS 即將推出的新 樣式查詢 功能的解決方案未來會是什麼樣子！
這就是 Studio！將其拉下來，拆開它，看看你是否學到了一些新技巧。
像我們所有的範本一樣，它包含在一次性購買的 Tailwind UI 所有存取權限 授權中，這是支持我們在 Tailwind CSS 上工作的最佳方式，並使我們能夠在未來幾年繼續建構出色的產品。