proNew113 lines · framer-motion

Privacy Points

The questions that come up, answered up front. A full-width feature section: a responsive grid of trust and privacy point cards, each with an original line icon, lifting gently on hover and fading in staggered as the grid scrolls into view.

Use it for: An AI or SaaS product page's trust/security section, laying out the handful of privacy claims visitors usually ask about before they ask.
Themes: Light + dark
License: Commercial use

Live

Trust

Privacy that holds up to questions

The points that usually come up, answered up front.

Encrypted in transit

Every request travels over an encrypted connection, end to end.

You control retention

Decide how long anything is kept, and clear it whenever you like.

Not used to train models

What you send stays yours — it never trains anything in the background.

Regional hosting

Keep data in the region you choose, not wherever is convenient for us.

Scoped access keys

Every key can be limited to exactly what it needs and nothing more.

Independently reviewed

The security posture is checked by people outside the team that built it.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width feature section: a grid of trust/privacy point cards, each with an
 * original icon, that lift slightly on hover and fade/rise in staggered as the grid
 * scrolls into view.
 */

export interface PrivacyPoint {
  title: string;
  detail: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each card fades and rises in the first time it scrolls into view, staggered left to right then row by row.
→Cards lift a few pixels on hover for tactile feedback; the lift is skipped under prefers-reduced-motion.
→points accepts any list of { title, detail, icon }, choosing from six built-in line icons drawn as inline SVG.
→columns switches the grid between 2, 3 or 4 columns on wide screens while staying a single column on narrow ones.

Accessibility

✓Icons are decorative (`aria-hidden`); every point's meaning is carried by its title and detail text.
✓Cards are plain content blocks, not buttons or links, so they carry no misleading interactive semantics.
✓Honours prefers-reduced-motion.