Meet Studio：我们全新的精美代理网站模板

我们刚刚发布了 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="text-center font-display 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 钩子和 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,
}

## Overview

Noticing incredibly high churn, the team at Phobia came to the conclusion that, instead of having a
fundamentally flawed business idea, they needed to improve their onboarding process.

Previously users selected their phobias manually but this led to some users selecting things they
weren’t actually afraid of to increase their matches.

To combat this, we developed a system that displays a slideshow of common phobias during
onboarding. We then use malware to surreptitiously access their microphone and detect when they
have audible reactions. We measure the pitch, volume and duration of their screams and feed that
information to the matching algorithm.

The next phase is a VR version of the onboarding flow where users are subjected to a series of
scenarios that will determine their fears. We are currently developing the first scenario, working
title: “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 的工作并使我们能够在未来几年继续构建很棒的东西的最佳方式。

Meet Studio：我们全新的精美代理网站模板

​令人愉悦的动画

​以开发者为中心的案例研究和博客工作流程

令人愉悦的动画

以开发者为中心的案例研究和博客工作流程