Debug Bloom Export | Sindara (Clone)

🔍 DEBUG: Bloom/Flower Animation Search⚠️ NO BLOOM ANIMATION FOUND
A full search for keywords bloom, petal, lotus, flower, blossom across all .jsx/.js/.ts/.tsx/.css files found zero looping bloom/blooming animation components. There is no lotus animation, no keyframe petal-opening sequence, and no canvas/Three.js flower animation anywhere in this codebase.
The only petal-related component found is WellnessSignature.jsx — a static radial SVG petal chart. The petals fade+scale in on mount (one-time entry animation, not a bloom loop). It is actively used in the scan results page.
ONLY MATCH: src/components/scan/results/WellnessSignature.jsxStatic radial SVG with 8 teardrop petals. One-time entry animation (opacity 0→1, scale 0.3→1 per petal). Actively used in results page. NOT a bloom animation.
ABCDEFGH
Full source code — src/components/scan/results/WellnessSignature.jsx/**
 * WellnessSignature — 8-area flower graph + wellness areas list
 * FILE: src/components/scan/results/WellnessSignature.jsx
 *
 * NOTE: This is a STATIC radial SVG petal chart — NOT a bloom/blooming animation.
 * It renders 8 teardrop petals that fade+scale in on mount (framer-motion),
 * but there is no looping bloom animation, no keyframe petal-opening sequence,
 * and no lotus/flower animation of any kind in this codebase.
 */

import React from "react";
import { motion } from "framer-motion";
import { useLanguage } from "@/lib/LanguageContext";

const ALL_AREAS = [
  "Inflammation Response",
  "Circulation & Skin Tone",
  "Stress & Nervous System",
  "Sleep & Recovery",
  "Skin & Detox",
  "Energy & Fatigue",
  "Muscle Tension & Tightness",
  "Digestive & Gut Balance",
];

const AREA_KEY_MAP = {
  "Inflammation Response": "wellness_inflammation",
  "Circulation & Skin Tone": "wellness_circulation",
  "Stress & Nervous System": "wellness_stress",
  "Sleep & Recovery": "wellness_sleep",
  "Skin & Detox": "wellness_skin",
  "Energy & Fatigue": "wellness_energy",
  "Muscle Tension & Tightness": "wellness_muscle",
  "Digestive & Gut Balance": "wellness_digestive",
};

const COLORS = {
  primary:    "#2C5338",
  secondary:  "#8AAE8E",
  supporting: "#C3D6C5",
  default:    "#E9EEE9",
};

const TEXT_COLORS = {
  primary:    "#ffffff",
  secondary:  "#ffffff",
  supporting: "#3a5c3e",
  default:    "#9aae9a",
};

const LEGEND_KEYS = [
  { key: "primary",    tKey: "legend_primary",    tSub: "legend_primary_sub" },
  { key: "secondary",  tKey: "legend_secondary",  tSub: "legend_secondary_sub" },
  { key: "supporting", tKey: "legend_supporting", tSub: "legend_supporting_sub" },
  { key: "default",    tKey: "legend_default",    tSub: "legend_default_sub" },
];

const SIZE = 400;
const CX = SIZE / 2;
const CY = SIZE / 2;
const ANGLES = Array.from({ length: 8 }, (_, i) => (360 / 8) * i - 90);
const LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H"];

function normalizeAreaName(name) {
  return (name || "").toLowerCase().replace(/\band\b/g, "&").replace(/\s+/g, " ").trim();
}

export default function WellnessSignature({ patterns, firstName }) {
  const { t } = useLanguage();
  if (!patterns || patterns.length === 0) return null;

  const rankMap = {};
  patterns.forEach((p, i) => {
    const idx = ALL_AREAS.findIndex(
      (a) => normalizeAreaName(a) === normalizeAreaName(p.name)
    );
    if (idx !== -1) {
      rankMap[idx] = i === 0 ? "primary" : i === 1 ? "secondary" : "supporting";
    }
  });

  return (
    <motion.section
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: 0.2 }}
      className="mb-14"
    >
      <h2 className="font-display text-3xl text-foreground mb-2">{t("results_signature_title")}</h2>
      <p className="text-muted-foreground leading-relaxed mb-8 text-[15px]">
        {firstName ? t("results_signature_subtitle", { firstName }) : t("results_signature_subtitle_no_name")}
      </p>

      <div className="bg-card border border-border rounded-2xl p-6 mb-4">
        <div className="flex justify-center mb-6">
          <svg viewBox={`0 0 ${SIZE} ${SIZE}`} width="340" height="340" className="overflow-visible">
            {ANGLES.map((angleDeg, i) => {
              const rank = rankMap[i] || "default";
              const fill = COLORS[rank];
              const textFill = TEXT_COLORS[rank];
              const rad = (angleDeg * Math.PI) / 180;
              const labelDistance = 95;
              const lx = CX + labelDistance * Math.cos(rad);
              const ly = CY + labelDistance * Math.sin(rad);
              return (
                <g key={i}>
                  <g transform={`rotate(${angleDeg + 90}, ${CX}, ${CY})`}>
                    <motion.path
                      d={`
                        M ${CX} ${CY} 
                        C ${CX - 55} ${CY - 60}, ${CX - 50} ${CY - 150}, ${CX} ${CY - 150}
                        C ${CX + 50} ${CY - 150}, ${CX + 55} ${CY - 60}, ${CX} ${CY} 
                        Z
                      `}
                      fill={fill}
                      style={{ originX: `${CX}px`, originY: `${CY}px` }}
                      initial={{ opacity: 0, scale: 0.3 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ duration: 0.4, delay: 0.06 * i }}
                    />
                  </g>
                  <text
                    x={lx}
                    y={ly}
                    textAnchor="middle"
                    dominantBaseline="middle"
                    fontSize="16"
                    fontWeight="500"
                    fill={textFill}
                    style={{ fontFamily: "Inter, sans-serif", userSelect: "none" }}
                  >
                    {LETTERS[i]}
                  </text>
                </g>
              );
            })}
            <circle cx={CX} cy={CY} r={4} fill="#ffffff" />
          </svg>
        </div>

        <div className="flex flex-wrap justify-center gap-x-6 gap-y-3">
          {LEGEND_KEYS.map(({ key, tKey, tSub }) => (
            <div key={key} className="flex items-center gap-2">
              <div
                className="w-4 h-4 rounded-full flex-shrink-0"
                style={{
                  backgroundColor: COLORS[key],
                  border: key === "default" ? "1px solid #c8d8c0" : "none",
                }}
              />
              <div>
                <p className="text-xs font-semibold text-foreground tracking-wide leading-none">{t(tKey)}</p>
                <p className="text-[10px] text-muted-foreground leading-none mt-0.5">{t(tSub)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-card border border-border rounded-2xl p-6">
        <p className="text-xs font-semibold text-muted-foreground tracking-widest uppercase mb-5">
          {t("results_areas_title")}
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
          {ALL_AREAS.map((area, i) => {
            const rank = rankMap[i] || "default";
            return (
              <div key={i} className="flex items-center gap-3">
                <div
                  className="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 text-xs font-semibold"
                  style={{
                    backgroundColor: COLORS[rank],
                    color: TEXT_COLORS[rank],
                    border: rank === "default" ? "1px solid #c8d8c0" : "none",
                  }}
                >
                  {LETTERS[i]}
                </div>
                <span className="text-[14px] text-foreground">{t(AREA_KEY_MAP[area] || area)}</span>
              </div>
            );
          })}
        </div>
      </div>

      <div className="bg-card border border-border rounded-2xl p-6 mt-4">
        <p className="text-xs font-semibold text-muted-foreground tracking-widest uppercase mb-5">
          {t("results_focus_areas_title")}
        </p>
        <div className="space-y-4">
          {patterns.slice(0, 3).map((p, i) => {
            const idx = ALL_AREAS.findIndex(
              (a) => normalizeAreaName(a) === normalizeAreaName(p.name)
            );
            if (idx === -1) return null;
            const rank = i === 0 ? "primary" : i === 1 ? "secondary" : "supporting";
            const ordinalKey = `focus_ordinal_${i + 1}`;
            return (
              <div key={i} className="flex items-center gap-4">
                <span className="text-sm font-medium text-muted-foreground w-8 flex-shrink-0">
                  {t(ordinalKey)}
                </span>
                <div
                  className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 text-sm font-semibold"
                  style={{
                    backgroundColor: COLORS[rank],
                    color: TEXT_COLORS[rank],
                    border: rank === "default" ? "1px solid #c8d8c0" : "none",
                  }}
                >
                  {LETTERS[idx]}
                </div>
                <span className="text-[15px] text-foreground font-medium">
                  {t(AREA_KEY_MAP[ALL_AREAS[idx]] || ALL_AREAS[idx])}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </motion.section>
  );
}
🔍 DEBUG: Bloom/Flower Animation Search

ONLY MATCH: `src/components/scan/results/WellnessSignature.jsx`

Full source code — `src/components/scan/results/WellnessSignature.jsx`
