Sekki API for Framer

Introduction

This API endpoint is specifically optimized for Framer's Fetch component. It provides all 24 Sekki data, the current active Sekki, and seasonal icons that change randomly with each request.

Endpoint

Get Sekki Data

GET /api

Returns the current sekki, all 24 sekki, and seasonal icons in a Framer-friendly format.

Example Response:

{
  "success": true,
  "current": {
    "id": 4,
    "name": {
      "japanese": "春分",
      "romaji": "Shunbun",
      "reading": "しゅんぶん"
    },
    "season": "spring",
    "color": "#A8D193",
    "description": "Spring equinox. Day and night are of equal length.",
    "date": "March 21"
  },
  "all": [
    {
      "id": 1,
      "name": {
        "japanese": "立春",
        "romaji": "Risshun",
        "reading": "りっしゅん"
      },
      "season": "spring",
      "color": "#D6E5A8",
      "description": "Beginning of spring. The east wind melts the ice.",
      "date": "February 4"
    },
    ...
  ],
  "data": [
    {
      "season": "spring",
      "icon": "flower",
      "iconDescription": "Blooming flower",
      "count": 6,
      "color": "#8BC48A"
    },
    {
      "season": "summer",
      "icon": "sun",
      "iconDescription": "Hot summer sun",
      "count": 6,
      "color": "#32A0B5"
    },
    {
      "season": "autumn",
      "icon": "leaf",
      "iconDescription": "Autumn leaf",
      "count": 6,
      "color": "#E6961A"
    },
    {
      "season": "winter",
      "icon": "snowflake",
      "iconDescription": "Snowflake",
      "count": 6,
      "color": "#F26860"
    }
  ]
}

Using in Framer

To use this API in your Framer project:

1. Set up the Fetch component

Add a Fetch component to your Framer project
Set the URL to: https://your-vercel-deployment-url.vercel.app/api
Set Method to "GET"
Set Path to the data you want to access (e.g., "current.name.japanese" or "data[0].icon")
Set a Fallback value in case the API is unreachable

2. Access data in your design

You can access the Fetch component's data in your design using:

Text layers: Connect to the Fetch component's output
Color properties: Connect to color values (e.g., "current.color")
Variables: Store API data in Framer variables for reuse

3. Using the seasonal icons

The API provides random seasonal icons that change with each request:

Access spring icon: data[0].icon
Access summer icon: data[1].icon
Access autumn icon: data[2].icon
Access winter icon: data[3].icon

These are Lucide icon names that can be used directly in Framer with the Icon component.

Troubleshooting

If you see "Failed to fetch" errors:

Verify your Vercel deployment URL is correct
Check that your Framer project has internet access
Try using a different browser or device
Set a meaningful fallback value to handle offline scenarios

Seasonal Icons

The API includes 10 different icons for each season that are randomly selected on each request:

Spring Icons

flower - Blooming flower
leaf - Fresh green leaf
cloud-sun - Partly cloudy spring day
droplets - Spring rain
wind - Spring breeze
sprout - Growing sprout
sun - Spring sunshine
butterfly - Butterfly
bird - Singing bird
rainbow - Spring rainbow

Summer Icons

sun - Hot summer sun
umbrella - Beach umbrella
waves - Ocean waves
palm-tree - Palm tree
ice-cream - Ice cream
cloud-lightning - Summer storm
fan - Cooling fan
sunset - Summer sunset
mountain-sun - Summer mountain
flamingo - Flamingo

Autumn Icons

leaf - Autumn leaf
wind - Autumn wind
cloud-rain - Autumn rain
coffee - Warm coffee
trees - Autumn trees
mountain - Autumn mountain
book-open - Open book
umbrella - Rain umbrella
squirrel - Squirrel
wheat - Wheat harvest

Winter Icons

snowflake - Snowflake
cloud-snow - Snowing cloud
thermometer-snowflake - Cold temperature
cup-soda - Hot drink
flame - Warm fire
moon - Winter night
mountain-snow - Snowy mountain
gift - Winter gift
candy-cane - Candy cane
mittens - Warm mittens